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

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

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

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”段落的下外邊距為負，其父元素的底端會(huì )向上拉，使得段落超出其父元素的底端。

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

p{margin:15px 0;}

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

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

h2{margin-bottom:0;}

h2+p{margin-top:0;}

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

h2{margin-bottom:0;}

p{margin:0 0 1em;}

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

這樣能正常工作，因為段落之間的1em間隔是外邊距合并的結果。因此，如果去掉其中一個(gè)外邊距（在這里就是上外邊距視覺(jué)效果與保留該外邊距的效果是一樣的。