CSS 外邊距

CSS 外邊距

• CSS 邊框
• CSS 外邊距合併

圍繞在元素邊框的空白區域是外邊距。設置外邊距會在元素外建立額外的「空白」。

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

CSS 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 進行自定義。

CSS 外邊距實例：

設置文本的左外邊距

本例演示如何設置文本的左外邊距。

設置文本的右外邊距

本例演示如何設置文本的右外邊距。

設置文本的上外邊距

本例演示如何設置文本的上外邊距。

設置文本的下外邊距

本例演示如何設置文本的下外邊距。

全部的外邊距屬性在一個聲明中。

本例演示如何將全部的外邊距屬性設置於一個聲明中。

CSS 外邊距屬性

屬性	描述
margin	簡寫屬性。在一個聲明中設置全部外邊距屬性。
margin-bottom	設置元素的下外邊距。
margin-left	設置元素的左外邊距。
margin-right	設置元素的右外邊距。
margin-top	設置元素的上外邊距。