前面介紹了邊框，一個元素除了邊框這種能看見的，它還有兩個看不見的空間，就是外邊距（margin）和填充（padding）。

為方便起見，以下直接使用 margin 和 padding 敘述。

margin 定義元素與外部元素之間的間距，而 padding 定義的，是元素自身邊框與元素內容之間的間距。

咱們看一張圖就清楚了。

在最中間的內容塊，它外面的淺藍區域是 padding，注意看到它是內容與實線邊框之間的區域。

而實線邊框與最外層的虛線框之間的區域，則是 margin。

虛線框之外的地方，就是其它元素占據的區域。

這張圖里，放置了內容塊上右下左各一個元素區域，結合昨天介紹的邊框的內容，是不是很熟悉？

外邊距（margin）

margin 本身就是個屬性，不過它和 border 一樣，是個簡寫。

那自然，如果不簡寫，需要用到的屬性如下：

• margin-top

• margin-right

• margin-bottom

• margin-left

如下圖所示：

它們能接受的值，可以是一個固定的值，比如 1px, 1em, 1pt 等，也可以是一個百分比(%)。

簡寫具體代表的值，則和之前說過的上右下左順序一樣，只不過這里的簡寫還有幾種情況。

如果是按以下方式寫全了，意思自然不用說了。

.one {   margin: 1px 2px 3px 4px; } 

簡寫則分成以下情況。

簡寫為一個值

.one {   margin: 1px; } /* 上面和下面效果一樣 */ .two {   margin-top: 1px;   margin-right: 1px;   margin-bottom: 1px;   margin-left: 1px; } 

簡寫為兩個值

.one {   margin: 1px 2px; } /* 上面和下面效果一樣 */ .two {   margin-top: 1px;   margin-right: 2px;   margin-bottom: 1px;   margin-left: 2px; } 

簡寫為三個值

.one {   margin: 1px 2px 3px; } /* 上面和下面效果一樣 */ .two {   margin-top: 1px;   margin-right: 2px;   margin-bottom: 3px; } 

填充（padding）

padding 本身也個屬性，它和 margin、 border 一樣，是個簡寫。

不使用簡寫的時候，則有以下屬性可用：

• padding-top

• padding-right

• padding-bottom

• padding-left

如下圖所示：

padding 的簡寫方式和效果和 margin 完全一樣，此外不再展開敘述。

總結

• ?? margin 定義元素與外部元素之間的間距，也就是 border 與外部其它元素之間的間距。

• ?? padding 定義元素自身邊框與元素內容之間的間距。

• ?? margin 和 padding 本身都是簡寫元素，簡寫的順序遵循上右下左。