外邊距

網(wǎng)頁(yè)設(shè)計(jì)中大多數(shù)正常流元素間出現(xiàn)的間隔都是因?yàn)榇嬖谠赝膺吘啵O(shè)置外邊距會(huì)在元素外創(chuàng)建額外的“空白"?！翱瞻住蓖ǔＶ覆荒芊牌渌氐膮^(qū)域，而且在這個(gè)區(qū)域中可以看到父元素的背景。

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

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

初始值：未定義

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

繼承性：無(wú)

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

計(jì)算值：見(jiàn)各個(gè)屬性

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

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

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

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

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

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

長(zhǎng)度值和外邊距

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

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

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

img(margin:1em;）

這就大功告成了。

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

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

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

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

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

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

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

前面已經(jīng)提到，可以對(duì)元素的外邊距設(shè)置百分?jǐn)?shù)值。百分?jǐn)?shù)是相對(duì)于父元素的width計(jì)算的，所以如果父元素的width以某種方式發(fā)生改變，百分?jǐn)?shù)也會(huì)改變。例如，假設(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>

與之對(duì)照，再考慮另一種情況，沒(méi)有為元素聲明width。在這種情況下，元素框的總寬度（包括外邊距）取決于父元素的的width。這有可能得到“流式”頁(yè)面，即元素的外邊距會(huì)擴(kuò)大或縮小以適應(yīng)父元素（或顯示畫(huà)布）的實(shí)際大小。如果對(duì)一個(gè)文檔設(shè)置樣式，使其元素使用百分?jǐn)?shù)外邊距，當(dāng)用戶修改瀏覽器窗口的寬度時(shí)，外邊距會(huì)隨之?dāng)U大或縮小。具體的設(shè)計(jì)選擇取決于你。

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

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

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

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

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

下面再來(lái)看這個(gè)規(guī)則：

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

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