外邊距

網頁設計中大多數正常流元素間出現的間隔都是因為存在元素外邊距，設置外邊距會在元素外創建額外的“空白"?！翱瞻住蓖ǔＶ覆荒芊牌渌氐膮^域，而且在這個區域中可以看到父元素的背景。

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

margin值：[<length>I<percentage>I auto]{1,4}|inherit

初始值：未定義

應用于：所有元素

繼承性：無

百分數：相對于包含塊的width

計算值：見各個屬性

外邊距設置為auto的效果在第7章已詳細討論過，所以這里不再重復。另外，網頁設計中更常見的做法是為外邊距設置長度值。假設你想將h1元素的外邊距設置為1/4英寸。

h1(margin:0.25in;background-color:silver;}

這樣會在h1元素的各個邊上設置一個1/4英寸寬的空白。

margin可以接受任何長度度量?？梢允窍袼?、英寸，毫米或em。不過，margin的默認值是0，所以如果沒有為margin聲明一個值，就不會出現外邊距。

不過，在實際中，網站制作人員對許多元素已經提供了預定的樣式，外邊距也不例外。例如，在支持網站建設CSS的瀏覽器中。外邊距會在每個段落元素的上面和下面生成“空行”。因此，如果沒有為P元素聲明外邊距，瀏覽器可能會自己應用某個外邊距。當然，只要你特別做了聲明，就會覆蓋默認樣式。

最后一點，還可以為margin設置一個百分數值。這個值類型的詳細內容將在后面的“百分數和外邊距"一節中討論。

長度值和外邊距

前面提到過，設置元素的外邊距時，可以使用任何長度值。例如，要在段落元素外圍應用一個10像素的空白區，這相當簡單。以下規則會為段落指定一個銀色背景和一個10像素的外邊距，如圖8-6所示：

P{background-color:silver;margin:10px;}

（同樣地，增加背景色是為了幫助顯示內容區，這里的虛線只是用于說明，在瀏覽器中并不真正出現。）如圖8-6所示，為內容區的各邊增加了10像素的空白。這個結果有些類似于HTML中使用hspace和vspace屬性。實際上，可以使用margin設置一個圖像周圍的額外空間。假設希望所有圖像周圍都有1em的空白：

img(margin:1em;）

這就大功告成了。

有時，網站制作人員可能希望一個元素各邊上的空白不同。這也很簡單。如果希望所有h1元素的上外邊距為10像素，右外邊距為20像素，下外邊距為15像素，左外邊距為5像素，只需以下規則：h1{margin:10px 20px 15px 5px;}

這些值的順序很重要，應當遵循以下摸式：margin:top right bottom left

要記住這個模式有個好辦法，就是記住這4個值是從上（top）開始圍著元素順時針旋轉的。一定要以這個順序應用值，所以要得到你想要的效果，就必須正確地安排值的順序。

注意：網頁設計中還有一種很容易的方法可以記住應當以什么順序聲明各邊的外邊距，這就是要記住，以正確的順序設置各邊外邊距有助于你避免“TRouBLe”，即TRBL，這代表“Top Right Bottom Left".

也可以混合使用各種類型的長度值。一個規則中并不限制只能使用一種長度類型，如下所示：

h2{margin:14px 5em 0.1in 3ex;}/*value variety!*/圖8-7顯示了這個聲明的效果，這里提供了一點注解。

百分數和外邊距

前面已經提到，可以對元素的外邊距設置百分數值。百分數是相對于父元素的width計算的，所以如果父元素的width以某種方式發生改變，百分數也會改變。例如，假設有以下規則，如圖8-8所示：

p{margin:10%;}

<div style="width:200px;border:1px dotted;">

<p>This paragraph is contained within a DIV that has a width of 200 pixels,

so its margin will be 10%of the width of the paragraph's parent(the DIV).

Given the declared width of 200 pixels,the margin will be 20 pixels on all sides.</p>

</div>

<div style="width:100px;border:1px dotted;">

<p>This paragraph is contained within a DIV with a width of 100 pixels,so its margin will still be 10%of the width of the paragraph's parent.There will,therefore,be half as much margin on this paragraph as that on the first paragraph.</p>

</div>

與之對照，再考慮另一種情況，沒有為元素聲明width。在這種情況下，元素框的總寬度（包括外邊距）取決于父元素的的width。這有可能得到“流式”頁面，即元素的外邊距會擴大或縮小以適應父元素（或顯示畫布）的實際大小。如果對一個文檔設置樣式，使其元素使用百分數外邊距，當用戶修改瀏覽器窗口的寬度時，外邊距會隨之擴大或縮小。具體的設計選擇取決于你。

你可能已經注意到，圖8-8中的段落有些奇怪。不僅其左右兩邊的外邊距會根據父元素的寬度改變，上下外邊距也會隨之改變。在CSS中這是期望行為。再來看屬性定義，可以看到，百分數值定義為相對于父元素的width。這不僅應用于左右外邊距，也應用于上下外邊距。因此，網頁設計給定以下樣式和標記，段落的上外邊距將是50px:

div p{margin-top:10%;}

<div style="width:500px;">

<p>This is a paragraph,and its top margin is 10%the width of its parent e1ement.</p>

</div>

如果div的width改變，段落的上外邊距也會改變?？瓷先ビ行┢婀?，是不是？這樣來考慮，我們認為，正常流中的大多數元素都會足夠高以包含其后代元素（包括其外邊距）。如果一個元素的上下外邊距是父元素的height的一個百分數，就可能導致一個無限循環，父元素的height會增加，以適應后代元素上下外邊距的增加，而相應地，上下外邊距又必須增加，以適應新的父元素height，如此繼續。規范的作者沒有簡單地忽略上下外邊距百分數，而是決定讓它與父元素的width相關，不會根據其后代元素的width而改變。

注意：對于定位元素，上下外邊距如果是百分數值，其處理會有所不同，更多的詳細內容參見第10章。

還可以混合使用百分數和長度值。因此，為了將h1元素設置為上下外邊距都是0.5em，而左右外邊距為瀏覽器窗口寬度的10%，可以如下聲明。

h1 {margin:0.5em 10% 0.5em 10%;}

在此，盡管上下外邊距總保持不變，不過左右外邊距會根據窗口的寬度改變。當然，這里假設所有h1元素都是body元素的子元素，而body與瀏覽器窗口寬度相等。簡單地說，h1元素的左右外邊距將是h1父元素寬度的10%。

下面再來看這個規則：

h1 {margin:0.5em 10% 0.5em 10%;}

看上去有些冗余，是不是？畢竟，必須把相同的一對值鍵入兩次。幸運的是，網站制作CSS提供了一種很容易的方法來避免這樣做。