日韩欧美国产精品免费一二-日韩欧美国产精品亚洲二区-日韩欧美国产精品专区-日韩欧美国产另-日韩欧美国产免费看-日韩欧美国产免费看清风阁

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

為方便起見(jiàn)，以下直接使用 margin 和 padding 敘述。

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

咱們看一張圖就清楚了。

在最中間的內(nèi)容塊，它外面的淺藍(lán)區(qū)域是 padding，注意看到它是內(nèi)容與實(shí)線(xiàn)邊框之間的區(qū)域。

而實(shí)線(xiàn)邊框與最外層的虛線(xiàn)框之間的區(qū)域，則是 margin。

虛線(xiàn)框之外的地方，就是其它元素占據(jù)的區(qū)域。

這張圖里，放置了內(nèi)容塊上右下左各一個(gè)元素區(qū)域，結(jié)合昨天介紹的邊框的內(nèi)容，是不是很熟悉？

外邊距（margin）

margin 本身就是個(gè)屬性，不過(guò)它和 border 一樣，是個(gè)簡(jiǎn)寫(xiě)。

那自然，如果不簡(jiǎn)寫(xiě)，需要用到的屬性如下：

• margin-top

• margin-right

• margin-bottom

• margin-left

如下圖所示：

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

簡(jiǎn)寫(xiě)具體代表的值，則和之前說(shuō)過(guò)的上右下左順序一樣，只不過(guò)這里的簡(jiǎn)寫(xiě)還有幾種情況。

如果是按以下方式寫(xiě)全了，意思自然不用說(shuō)了。

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

簡(jiǎn)寫(xiě)則分成以下情況。

簡(jiǎn)寫(xiě)為一個(gè)值

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

簡(jiǎn)寫(xiě)為兩個(gè)值

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

簡(jiǎn)寫(xiě)為三個(gè)值

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

填充（padding）

padding 本身也個(gè)屬性，它和 margin、 border 一樣，是個(gè)簡(jiǎn)寫(xiě)。

不使用簡(jiǎn)寫(xiě)的時(shí)候，則有以下屬性可用：

• padding-top

• padding-right

• padding-bottom

• padding-left

如下圖所示：

padding 的簡(jiǎn)寫(xiě)方式和效果和 margin 完全一樣，此外不再展開(kāi)敘述。

總結(jié)

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

• ?? padding 定義元素自身邊框與元素內(nèi)容之間的間距。

• ?? margin 和 padding 本身都是簡(jiǎn)寫(xiě)元素，簡(jiǎn)寫(xiě)的順序遵循上右下左。