簡介 ![]() 邊界(Margin) 邊界用來設定各個元素之間的距離,所以,我們可以對該四個邊逐一設定: 1. margin-top(上邊界) 2. margin-right(右邊界) 3. margin-bottom(下邊界) 4. margin-left(左邊界) 補充: 所有四個邊的邊界可以同時由margin屬性設定,而且,在這裡,順序非常重要(上、右、下、左)。它的語法如下: margin: [上面邊界值] [右邊邊界值] [下面邊界值] [左邊邊界值] 範例: <style> #container { margin-top:50px; margin-right:100px; margin-bottom:auto; margin-left:100px; border:1px solid; } #container2 { margin:50px 100px auto 100px; border:1px dashed; } </style> <div id="container"> Margin Test </div> <hr> <div id="container2"> Margin Test2 </div> 邊框(Border) 在CSS中常見的邊框屬性有以下幾種: 1. border-style
2. border-width 可用值:thin(薄)、medium(中等)、thick(厚)、num px。 例: border-width:9px border-width:medium 3. border-color 例: border-color:#0000FF border-color:blue 4. border-top, right, bottom, left 例: border-top-style:solid; border-bottom-style:dotted border-top-style:solid; border-top-width:medium border-left-style:solid; border-bottom-style:dashed; border-bottom-color:#00FF00 5. border 若四邊的邊框屬性都一樣,那我們可以用一個 border 屬性來描述,而不必四個邊都描述一次。另外,我們可以在同一行一次宣告邊框樣式、邊框寬度、以及邊框顏色。 例: p { border:#0000FF 5px solid; } 留白(Padding) 我們可以對該四個邊的留白逐一設定: 1. padding-top(上) 2. padding-right(右) 3. padding-bottom(下) 4. padding-left(左) 補充: 所有四個邊的留白可以同時由padding屬性設定,而且,在這裡,順序非常重要(上、右、下、左)。它的語法如下: padding: [上面留白值] [右邊留白值] [下面留白值] [左邊留白值] 範例: <style> #show { padding-top:5px; padding-right:3px; padding-bottom:10px; padding-left:20px; border: 1px solid; } #show2 { padding:5px 3px 10px 20px; border:1px dashed; } </style> <div id="show"> Padding Test </div> <hr /> <div id="show2"> Padding Test2 </div> |
B05.HTML 5, jQuery, Facebook & GWT > 04.CSS >