CSS 語法 10：盒子模式(box model) padding, border, margin

內距 padding

padding 就是內容和邊裝間的距離，可以分為上下左右分別設定個別距離。

#box {
padding-top:40px;
padding-bottom:10px;
padding-left:80px;
padding-right:30px;
border: 1px solid #000000;
width: 340px;
}

<div id="box">
上面距離邊框40 px,下面 10px。
</div>

以上會顯示為：

我們也可以把上下左右的內距寫在同一行，但是順序是順時針由上開始，不能弄錯 padding:上px 右px 下px 左px;
上面的 padding 值也可以寫為：

padding: 40px 30px 10px 80px;

邊框 border

border 的屬性有以下幾種：

• border-color
• border-width
• border-style
• border-top-, border-left-, border-bottom-, border-right-
• border

• border-color

p {border-color:#0000FF;}

以上將顯示為：

邊框為紅色

• border-width

邊框的粗細，除了可以設定為值以外，也可以用 thin(細), medium(中), thick(粗) 來表示。

p {border-width:9px; border-style:solid;}

邊框9px

p {border-width:thin; border-style:solid;}

細邊框

• border-style

p {border-style:solid;}	實線
p {border-style:double;}	雙線
p {border-style:dashed;}	虛線
p {border-style:dotted;}	點線
p {border-style:ridge;}	凸線
p {border-style:groove;}	凹線
p {border-style:outset;}	凸起線
p {border-style:inset;}	陷入線

• border-top-, border-left-, border-bottom-, border-right-

邊框的四邊可以分開宣告屬性，再加上可以一次設定3種屬性的值，順序不拘。

p {
border-top:solid 5px red;
border-bottom:dotted 6px #C0C0C0;
border-left:dashed 8px #FF6699;
border-right:double 4px #a0a0a0;
}

邊框分開設定樣式

• border

如果4個邊都要宣告一樣的樣式，就只要用 border 屬性就好了，不用上下左右宣告4次。

p {
border:#FFCC99 3px solid;
}

4邊用一樣的樣式

邊緣 margin

邊緣(margin)屬性和內距(padding) 一樣，可以方上下左右設定，也可以用一行直接設定上、右、下、左，這個順序是固定的，不能隨意調動。

#boxmargin {
margin-top:30px;
margin-left:10%;
margin-right:20px;
margin-bottom:15px;
border: 1px solid #000000;
}

＊小訣竅：將一個塊狀元素放到另一個塊狀元素裡面時，如果出現 margin-top 明明有設距離，但是卻貼在外元素的頂端。
以上面為例，當宣告 margin-top:30px ，但是橘色的框框卻貼在藍色框框的上緣，要怎麼處理。
這時候通常把藍色框框宣告邊框屬性就會解決了。比如說上面的藍色框框就宣告了 border: 1px solid gray; 的外框屬性。
上面兩個盒子的語法如下：

<div style="background-color: #0099cc; height: auto; width: 350px; border: 1px solid gray;">
<div style="border: 1px solid #000000; background-color: #ff9900; margin: 30px 20px 15px 10%;">內容</div>
</div>