外邊距

網(wǎng)頁設(shè)計(jì)中大多數(shù)正常流元素間出現(xiàn)的間隔都是因?yàn)榇嬖谠赝膺吘?，設(shè)置外邊距會在元素外創(chuàng)建額外的“空白"。“空白”通常指不能放其他元素的區(qū)域，而且在這個區(qū)域中可以看到父元素的背景。

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

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

初始值：未定義

應(yīng)用于：所有元素

繼承性：無

百分?jǐn)?shù)：相對于包含塊的width

計(jì)算值：見各個屬性

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

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

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

margin可以接受任何長度度量?？梢允窍袼亍⒂⒋?，毫米或em。不過，margin的默認(rèn)值是0，所以如果沒有為margin聲明一個值，就不會出現(xiàn)外邊距。

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

最后一點(diǎn)，還可以為margin設(shè)置一個百分?jǐn)?shù)值。這個值類型的詳細(xì)內(nèi)容將在后面的“百分?jǐn)?shù)和外邊距"一節(jié)中討論。

長度值和外邊距

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

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

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

img(margin:1em;）

這就大功告成了。

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

這些值的順序很重要，應(yīng)當(dāng)遵循以下摸式：margin:top right bottom left

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

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

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

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

百分?jǐn)?shù)和外邊距

前面已經(jīng)提到，可以對元素的外邊距設(shè)置百分?jǐn)?shù)值。百分?jǐn)?shù)是相對于父元素的width計(jì)算的，所以如果父元素的width以某種方式發(fā)生改變，百分?jǐn)?shù)也會改變。例如，假設(shè)有以下規(guī)則，如圖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。這有可能得到“流式”頁面，即元素的外邊距會擴(kuò)大或縮小以適應(yīng)父元素（或顯示畫布）的實(shí)際大小。如果對一個文檔設(shè)置樣式，使其元素使用百分?jǐn)?shù)外邊距，當(dāng)用戶修改瀏覽器窗口的寬度時，外邊距會隨之?dāng)U大或縮小。具體的設(shè)計(jì)選擇取決于你。

你可能已經(jīng)注意到，圖8-8中的段落有些奇怪。不僅其左右兩邊的外邊距會根據(jù)父元素的寬度改變，上下外邊距也會隨之改變。在CSS中這是期望行為。再來看屬性定義，可以看到，百分?jǐn)?shù)值定義為相對于父元素的width。這不僅應(yīng)用于左右外邊距，也應(yīng)用于上下外邊距。因此，網(wǎng)頁設(shè)計(jì)給定以下樣式和標(biāo)記，段落的上外邊距將是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改變，段落的上外邊距也會改變。看上去有些奇怪，是不是？這樣來考慮，我們認(rèn)為，正常流中的大多數(shù)元素都會足夠高以包含其后代元素（包括其外邊距）。如果一個元素的上下外邊距是父元素的height的一個百分?jǐn)?shù)，就可能導(dǎo)致一個無限循環(huán)，父元素的height會增加，以適應(yīng)后代元素上下外邊距的增加，而相應(yīng)地，上下外邊距又必須增加，以適應(yīng)新的父元素height，如此繼續(xù)。規(guī)范的作者沒有簡單地忽略上下外邊距百分?jǐn)?shù)，而是決定讓它與父元素的width相關(guān)，不會根據(jù)其后代元素的width而改變。

注意：對于定位元素，上下外邊距如果是百分?jǐn)?shù)值，其處理會有所不同，更多的詳細(xì)內(nèi)容參見第10章。

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

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

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

下面再來看這個規(guī)則：

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

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