华南俳烁实业有限公司

圍繞在元素邊框的空白區(qū)域是外邊距。設(shè)置外邊距會(huì)在元素外創(chuàng)建額外的“空白”。

設(shè)置外邊距的最簡單的方法就是使用 margin 屬性，這個(gè)屬性接受任何長度單位、百分?jǐn)?shù)值甚至負(fù)值。

CSS margin 屬性

設(shè)置外邊距的最簡單的方法就是使用 margin 屬性。

margin 屬性接受任何長度單位，可以是像素、英寸、毫米或 em。

margin 可以設(shè)置為 auto。更常見的做法是為外邊距設(shè)置長度值。下面的聲明在 h1 元素的各個(gè)邊上設(shè)置了 1/4 英寸寬的空白：

h1 {margin : 0.25in;}

下面的例子為 h1 元素的四個(gè)邊分別定義了不同的外邊距，所使用的長度單位是像素 (px)：

h1 {margin : 10px 0px 15px 5px;}

與內(nèi)邊距的設(shè)置相同，這些值的順序是從上外邊距 (top) 開始圍著元素順時(shí)針旋轉(zhuǎn)的：

margin: top right bottom left

另外，還可以為 margin 設(shè)置一個(gè)百分比數(shù)值：

p {margin : 10%;}

百分?jǐn)?shù)是相對于父元素的 width 計(jì)算的。上面這個(gè)例子為 p 元素設(shè)置的外邊距是其父元素的 width 的 10%。

margin 的默認(rèn)值是 0，所以如果沒有為 margin 聲明一個(gè)值，就不會(huì)出現(xiàn)外邊距。但是，在實(shí)際中，瀏覽器對許多元素已經(jīng)提供了預(yù)定的樣式，外邊距也不例外。例如，在支持 CSS 的瀏覽器中，外邊距會(huì)在每個(gè)段落元素的上面和下面生成“空行”。因此，如果沒有為 p 元素聲明外邊距，瀏覽器可能會(huì)自己應(yīng)用一個(gè)外邊距。當(dāng)然，只要你特別作了聲明，就會(huì)覆蓋默認(rèn)樣式。

值復(fù)制

還記得嗎？我們曾經(jīng)在前兩節(jié)中提到過值復(fù)制。下面我們?yōu)槟�講解如何使用值復(fù)制。

有時(shí)，我們會(huì)輸入一些重復(fù)的值：

p {margin: 0.5em 1em 0.5em 1em;}

通過值復(fù)制，您可以不必重復(fù)地鍵入這對數(shù)字。上面的規(guī)則與下面的規(guī)則是等價(jià)的：

p {margin: 0.5em 1em;}

這兩個(gè)值可以取代前面 4 個(gè)值。這是如何做到的呢？CSS 定義了一些規(guī)則，允許為外邊距指定少于 4 個(gè)值。規(guī)則如下：

• 如果缺少左外邊距的值，則使用右外邊距的值。
• 如果缺少下外邊距的值，則使用上外邊距的值。
• 如果缺少右外邊距的值，則使用上外邊距的值。

下圖提供了更直觀的方法來了解這一點(diǎn)：

換句話說，如果為外邊距指定了 3 個(gè)值，則第 4 個(gè)值（即左外邊距）會(huì)從第 2 個(gè)值（右外邊距）復(fù)制得到。如果給定了兩個(gè)值，第 4 個(gè)值會(huì)從第 2 個(gè)值復(fù)制得到，第 3 個(gè)值（下外邊距）會(huì)從第 1 個(gè)值（上外邊距）復(fù)制得到。最后一個(gè)情況，如果只給定一個(gè)值，那么其他 3 個(gè)外邊距都由這個(gè)值（上外邊距）復(fù)制得到。

利用這個(gè)簡單的機(jī)制，您只需指定必要的值，而不必全部都應(yīng)用 4 個(gè)值，例如：

h1 {margin: 0.25em 1em 0.5em;}	/* 等價(jià)于 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;}		/* 等價(jià)于 0.5em 1em 0.5em 1em */
p {margin: 1px;}			/* 等價(jià)于 1px 1px 1px 1px */

這種辦法有一個(gè)小缺點(diǎn)，您最后肯定會(huì)遇到這個(gè)問題。假設(shè)希望把 p 元素的上外邊距和左外邊距設(shè)置為 20 像素，下外邊距和右外邊距設(shè)置為 30 像素。在這種情況下，必須寫作：

p {margin: 20px 30px 30px 20px;}

這樣才能得到您想要的結(jié)果。遺憾的是，在這種情況下，所需值的個(gè)數(shù)沒有辦法更少了。

再來看另外一個(gè)例子。如果希望除了左外邊距以外所有其他外邊距都是 auto（左外邊距是 20px）：

p {margin: auto auto auto 20px;}

同樣的，這樣才能得到你想要的效果。問題在于，鍵入這些 auto 有些麻煩。如果您只是希望控制元素單邊上的外邊距，請使用單邊外邊距屬性。