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

盒子模式 (box model)

盒子模式用來定義一個元素的邊界、邊框、內距等內容,我們可以把每一個畫面上的元素視為一個方塊,在 CSS 排版上是很重要的概念。

常用的相關指令為:

  • padding (內距)
  • border (邊框)
  • margin (邊緣)

margin-padding-border 示意圖

內距 (padding)

內距 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>

以上會顯示為:

上面距離邊框40 px,下面 10px。

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

padding: 40px 30px 10px 80px;
邊框 (border)

邊框 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

邊緣(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>