圍繞在元素邊框的空白區域是外邊距。設置外邊距會在元素外創建額外的“空白”。
設置外邊距的最簡單的方法就是使用 margin 屬性，這個屬性接受任何長度單位、百分數值甚至負值。
CSS margin 屬性
設置外邊距的最簡單的方法就是使用margin 屬性。
講解一、
定義和用法
margin 簡寫屬性在一個聲明中設置所有外邊距屬性。該屬性可以有 1 到 4 個值。
説明
這個簡寫屬性設置一個元素所有外邊距的寬度，或者設置各邊上外邊距的寬度。
塊級元素的垂直相鄰外邊距會合並，而行內元素實際上不佔上下外邊距。行內元素的的左右外邊距不會合並。同樣地，浮動元素的外邊距也不會合並。允許指定負的外邊距值，不過使用時要小心。
註釋：允許使用負值。
默認值：0
繼承性：no
版本：CSS1
JavaScript 語法：object.style.margin="10px 5px"
Code
例子 1
margin:10px 5px 15px 20px;上外邊距是 10px
右外邊距是 5px
下外邊距是 15px
左外邊距是 20px
例子 2
margin:10px 5px 15px;上外邊距是 10px
右外邊距和左外邊距是 5px
下外邊距是 15px
例子 3
margin:10px 5px;上外邊距和下外邊距是 10px
右外邊距和左外邊距是 5px
例子 4
margin:10px;所有 4 個外邊距都是 10px
實例
設置 p 元素的 4 個外邊距：p{margin:2cm 4cm 3cm 4cm;}
瀏覽器支持
所有瀏覽器都支持 margin 屬性。
註釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。
可能的值
auto 瀏覽器計算外邊距。
length 規定以具體單位計的外邊距值，比如像素、釐米等。默認值是 0px。
% 規定基於父元素的寬度的百分比的外邊距。
inherit 規定應該從父元素繼承外邊距。
講解二、
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 進行自定義。
