CSS外邊距

CSS外邊距是圍繞在元素框線的空白區域。設定外邊距會在元素外創建額外的“空白”。設定外邊距的最簡單的方法就是使用 margin 屬性,這個屬性接受任何長度單位、百分數值甚至負值。

外框線

圍繞在元素框線的空白區域是外邊距。設定外邊距會在元素外創建額外的“空白”。

設定外邊距的最簡單的方法就是使用margin屬性,這個屬性接受任何長度單位、百分數值甚至負值。

屬性

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

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

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

h1 {margin : 0.25in;}

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

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

與內邊距的設定相同,這些值是從上外邊距 (top) 開始圍著元素順時針旋轉的:

margin: top right bottom left

另外,還可以為 margin 設定一個百分比數值:

p {margin : 10%;}

百分數是相對於父元素的 width 計算的。上面這個例子為 p 元素設定的外邊距是其父元素的 width 的 10%。

margin 的默認值是 0,所以如果沒有為 margin 聲明一個值,就不會出現外邊距。但是,在實際中,瀏覽器對許多元素已經提供了預定的樣式,外邊距也不例外。例如,在支持 CSS 的瀏覽器中,外邊距會在每個段落元素的上面和下面生成“空行”。因此,如果沒有為 p 元素聲明外邊距,瀏覽器可能會自己套用一個外邊距。當然,只要你特別作了聲明,就會覆蓋默認樣式。

值複製

還記得嗎?我們曾經在前兩節中提到過值複製。下面我們為您講解如何使用值複製。

有時,我們會輸入一些重複的值:

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

通過值複製,您可以不必重複地鍵入這對數字。上面的規則與下面的規則是等價的:

p {margin: 0.5em 1em;}

這兩個值可以取代前面 4 個值。這是如何做到的呢?CSS 定義了一些規則,允許為外邊距指定少於 4 個值。規則如下:

如果缺少左外邊距的值,則使用右外邊距的值。

如果缺少下外邊距的值,則使用上外邊距的值。

如果缺少右外邊距的值,則使用上外邊距的值。

下圖提供了一些更直觀的方法來了解這一點:

換句話說,如果為外邊距指定了 3 個值,則第 4 個值(即左外邊距)會從第 2 個值(右外邊距)複製得到。如果給定了兩個值,第 4 個值會從第 2 個值複製得到,第 3 個值(下外邊距)會從第 1 個值(上外邊距)複製得到。最後一個情況,如果只給定一個值,那么其他 3 個外邊距都由這個值(上外邊距)複製得到。

利用這個簡單的機制,您只需指定必要的值,而不必全部都套用 4 個值,例如:

h1 {margin: 0.25em 1em 0.5em;}/* 等價於 0.25em 1em 0.5em 1em */

h2 {margin: 0.5em 1em;}/* 等價於 0.5em 1em 0.5em 1em */

p {margin: 1px;}/* 等價於 1px 1px 1px 1px */

這種辦法有一個小缺點,您最後肯定會遇到這個問題。假設希望把 p 元素的上外邊距和左外邊距設定為 20 像素,下外邊距和右外邊距設定為 30 像素。在這種情況下,必須寫作:

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

這樣才能得到您想要的結果。遺憾的是,在這種情況下,所需值的個數沒有辦法更少了。

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

p {margin: auto auto auto 20px;}

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

邊距屬性

您可以使用單邊外邊距屬性為元素單邊上的外邊距設定值。假設您希望把 p 元素的左外邊距設定為 20px。不必使用 margin(需要鍵入很多 auto),而是可以採用以下寫法:

p {margin-left: 20px;}

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

margin-top

margin-right

margin-bottom

margin-left

一個規則中可以使用多個這種單邊屬性,例如:

h2 {

margin-top: 20px;

margin-right: 30px;

margin-bottom: 30px;

margin-left: 20px;

}

當然,對於這種情況,使用 margin 可能更容易一些:

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

不論使用單邊屬性還是使用 margin,得到的結果都一樣。一般來說,如果希望為多個邊設定外邊距,使用 margin 會更容易一些。不過,從文檔顯示的角度看,實際上使用哪種方法都不重要,所以應該選擇對自己來說更容易的一種方法。

提示和注釋

提示:Netscape 和 IE 對 body 標籤定義的默認邊距(margin)值是 8px。而 Opera 不是這樣。相反地,Opera 將內部填充(padding)的默認值定義為 8px,因此如果希望對整個網站的邊緣部分進行調整,並將之正確顯示於 Opera 中,那么必須對 body 的 padding 進行自定義。

相關詞條

熱門詞條

聯絡我們