框模型

假設框的每個邊上有 10 個畫素的外邊距和 5 個畫素的內邊距。如果希望這個元素框達到 100 個畫素，就需要將內容的寬度設定為 70 畫素，請看下圖：

CSS 框模型例項：

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

內邊距padding

CSS padding 屬性定義元素的內邊距。padding 屬性接受長度值或百分比值，但不允許使用負值。

例如，如果您希望所有 h1 元素的各邊都有 10 畫素的內邊距，只需要這樣：

h1 {padding: 10px;}

您還可以按照上、右、下、左的順序分別設定各邊的內邊距，各邊均可以使用不同的單位或百分比值：

h1 {padding: 10px 0.25em 2ex 20%;}

也通過使用下面四個單獨的屬性，分別設定上、右、下、左內邊距：

• padding-top
• padding-right
• padding-bottom
• padding-left

邊框

邊框樣式

border-style 屬性

值	描述
none	定義無邊框。
hidden	與 “none” 相同。不過應用於表時除外，對於表，hidden 用於解決邊框衝突。
dotted	定義點狀邊框。在大多數瀏覽器中呈現為實線。
dashed	定義虛線。在大多數瀏覽器中呈現為實線。
solid	定義實線。
double	定義雙線。雙線的寬度等於 border-width 的值。
groove	定義 3D 凹槽邊框。其效果取決於 border-color 的值。
ridge	定義 3D 壟狀邊框。其效果取決於 border-color 的值。
inset	定義 3D inset 邊框。其效果取決於 border-color 的值。
outset	定義 3D outset 邊框。其效果取決於 border-color 的值。
inherit	規定應該從父元素繼承邊框樣式。

定義四邊：

a:link img {border-style: outset;}

p.aside {border-style: solid dotted dashed double;}

單邊定義：

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

邊框的寬度

您可以通過 border-width 屬性為邊框指定寬度。

為邊框指定寬度有兩種方法：可以指定長度值，比如 2px 或 0.1em；或者使用 3 個關鍵字之一，它們分別是 thin 、medium（預設值） 和 thick。

您可以按照 top-right-bottom-left 的順序設定元素的各邊邊框：

p {border-style: solid; border-width: 15px 5px 15px 5px;}

上面的例子也可以簡寫為（這樣寫法稱為值複製）：

p {border-style: solid; border-width: 15px 5px;}

邊框的顏色

border-color 屬性

外邊距

設定外邊距的最簡單的方法就是使用 margin 屬性。

您可以使用下列任何一個屬性來只設定相應上的外邊距，而不會直接影響所有其他外邊距：

• margin-top
• margin-right
• margin-bottom
• margin-left

CSS 外邊距合併

外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。
合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合併。請看下圖：

當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合併。請看下圖：

假設有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合併：

如果這個外邊距遇到另一個元素的外邊距，它還會發生合併：

只有普通文件流中塊框的垂直外邊距才會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合並。