第7章曾經(jīng)討論過(guò)，網(wǎng)頁(yè)設(shè)計(jì)人員可以為元素設(shè)置負(fù)外邊距。這會(huì)導(dǎo)致元素框超出其父元素，或者與其他元素重疊，但并不違反框模型?？紤]以下規(guī)則：

div{border:1px dotted gray;margin:1em;}

p{margin:1em;border:1px dashed silver;}

p.one{margin:0-1em;}

p.two{margin:-1em 0;}

在第一個(gè)例子中，根據(jù)數(shù)學(xué)計(jì)算，這個(gè)段落的width計(jì)算值加上其左右外邊距剛好等于父元素div的width。所以，這個(gè)段落最后將比其父元素寬2em，但從數(shù)學(xué)角度講實(shí)際上并沒(méi)有更“寬”。在第二個(gè)例子中，負(fù)的上下外邊距實(shí)際上增加了元素的height計(jì)算值，將其上下外邊界向外移，這就與它之前和之后的段落發(fā)生了重疊。

網(wǎng)頁(yè)設(shè)計(jì)結(jié)合使用正負(fù)外邊距會(huì)很有用。例如，可以創(chuàng)造性地結(jié)合正負(fù)外邊距，使一個(gè)段落“超出”其父元素，或者可以創(chuàng)建一種蒙德里安風(fēng)格的效果，有多個(gè)重疊或隨機(jī)放置的框。

div{background:silver;border:1px solid;}

p{margin:1em;}

p.punch{background:white;margin:1em-1px 1em 25%;

border:1px solid;border-right:none;text-align:center;}

p.mond{background:#333;color:white;margin:1em 3em-3era-3em;}

由于“mond”段落的下外邊距為負(fù)，其父元素的底端會(huì)向上拉，使得段落超出其父元素的底端。

說(shuō)到上下外邊距，網(wǎng)頁(yè)設(shè)計(jì)人員還要記住重要的一點(diǎn)，正常流中垂直相鄰?fù)膺吘鄷?huì)合并，這個(gè)內(nèi)容在上一章已經(jīng)介紹過(guò)。外邊距合并在設(shè)置了樣式的每一個(gè)文檔中都在起作用。例如，以下是一個(gè)簡(jiǎn)單的規(guī)則：

p{margin:15px 0;}

這會(huì)導(dǎo)致一個(gè)段落跟在另一個(gè)段落后，二者之間有15像素的“外邊距空間”。如果外邊距沒(méi)有合并，那么這兩個(gè)相鄰段落之間應(yīng)當(dāng)有30像素的空間，但是網(wǎng)站建設(shè)人員不希望這樣。

不過(guò)，這確實(shí)說(shuō)明設(shè)置外邊距時(shí)必須小心。你很有可能想去掉標(biāo)題和下一段之間的空間。由于HTML文檔中的段落都有一個(gè)上外邊距，如果只是將標(biāo)題的下外邊距設(shè)置為0是不夠的，還必須去掉段落的上外邊距。利用CSS2的相鄰兄弟選擇器很容易做到這一點(diǎn)：

h2{margin-bottom:0;}

h2+p{margin-top:0;}

遺憾的是，瀏覽器對(duì)相鄰兄弟選擇器的支持還很有限（在寫(xiě)作本書(shū)時(shí)），大多數(shù)用戶(hù)都會(huì)看到標(biāo)題與其下一段之間有1em的間隔。不使用網(wǎng)站建設(shè)CSS2選擇器也可以得到所要的效果，不過(guò)要麻煩一些：

h2{margin-bottom:0;}

p{margin:0 0 1em;}

這會(huì)去除所有段落的上外邊距，不過(guò)由于段落都還有一個(gè)1em的下外邊距，所以還會(huì)保留所要的段間間隔，如圖8-14所示。

這樣能正常工作，因?yàn)槎温渲g的1em間隔是外邊距合并的結(jié)果。因此，如果去掉其中一個(gè)外邊距（在這里就是上外邊距視覺(jué)效果與保留該外邊距的效果是一樣的。