負外邊距

網(wǎng)頁(yè)設計中負外邊距確實(shí)對垂直格式化有影響，而且它們會(huì )影響外邊距如何合并。如果垂直外邊距都設置為負值，瀏覽器會(huì )取兩個(gè)外邊距絕對值的最大值。如果一個(gè)正外邊距與一個(gè)負外邊距合并，會(huì )從正外邊距減去這個(gè)負外邊距的絕對值。換句話(huà)說(shuō)，負值要增加到正值，所得到的就是元素間的距離。圖7-21給出了兩個(gè)具體的例子。

圖7-21：負垂直外邊距的例子

注意，上、下外邊距為負時(shí)有一種“拉近”效果。實(shí)際上，這與負水平外邊距使元素超出其父元素沒(méi)有什么區別。請考慮：

p.neg {margin-top:-50px; margin-right: 10px; margin-left: 10px; margin-bottom: 0; border: 3px solid gray;}

<div style="width: 420px; background-color: silver;

padding: 10px; margin-top: 50px; border: 1px solid;">

<p class="neg"> A paragraph.

</p> A div.

</div>

如圖7-22所示，因為段落的上外邊距為負，所以它被向上“拉”了 50像素。注意，以上標記中在段落后面有一個(gè)div，這個(gè)div的內容也向上拉了50像素。

圖7-22：負上外邊距的效果

負的下外邊距會(huì )使段落看上去被向下拉。將以下標記與圖7-23所示對照：

p.neg {margin-bottom:-50px; margin-right: 10px; margin-left: 10px; margin-top: 0; border: 3px solid gray;}

<div style="width: 420px; margin-top: 50px;">

<p class="neg"> A paragraph.

</p>

</div>

<p> The next paragraph.</p>

圖7-23：負下外邊距的效果

圖7-23中顯示，div后面的元素會(huì )根據div底端的位置放置?？梢钥吹?，相對于視覺(jué)上子元素（段落）的底端，實(shí)際上父元素div的底端在它之上。div后面下一個(gè)元素與div底端之間的距離是正確的。根據你使用的規則，確實(shí)應該如此。

下面來(lái)考慮一個(gè)例子，其中有一個(gè)列表項、一個(gè)無(wú)序列表以及一個(gè)標題，它們的外邊距都合并。在這里，為無(wú)序列表和標題指定了負外邊距：

li {margin-bottom: 20px;}

ul {margin-bottom:-15px;}

h1 {margin-top:-18px;}

兩個(gè)負外邊距中較大的一個(gè)（-18px）增加到了最大的正外邊距上（20px），這就得到了20px- 18px = 2px，因此，列表項內容底端與h1內容頂端之間只有2個(gè)像素的距離，如圖7-24所示。

圖7-24：正負外邊距合并詳解

網(wǎng)頁(yè)設計中還有一種行為沒(méi)有討論，如果由于負外邊距而導致元素彼此重疊，很難區分哪些元素在上面。你可能還會(huì )注意到，本節中所有例子都沒(méi)有使用背景色。如果確實(shí)使用了背景色，其內容可能會(huì )被后面元素的背景色所覆蓋，這是一種可以預見(jiàn)的行為，因為瀏覽器總會(huì )按從前到后的順序顯示元素，所以文檔中后出現的正常流元素可能會(huì )覆蓋較早出現的元素（如果這兩個(gè)元素重疊），

列表項

網(wǎng)頁(yè)設計中列表項有自身的一些特殊規則。這些列表項前面通常有一個(gè)標志，如一個(gè)圓點(diǎn)或一個(gè)數字。這個(gè)標志實(shí)際上并不是列表項內容區的一部分，所以如圖7-25所示的效果很常見(jiàn)。

圖7-25：列表項的內容

網(wǎng)站建設對這些標志相對于文檔布局的放置和效果涉及很少，但網(wǎng)站建設引入了專(zhuān)門(mén)為解決這個(gè)問(wèn)題而設計的一些屬性，如marker-offset:。不過(guò)，光有想法但缺少實(shí)現，這就使得這個(gè)屬性在CSS2.1中又被去掉了，很有可能CSS的將來(lái)版本還會(huì )引入另外一種方法來(lái)定義內容和標志之間的距離。因此，標志的放置不在創(chuàng )作人員的控制范圍內（至少在寫(xiě)作本書(shū)時(shí)是這樣）。

注意：第12章將更詳細地研究列表及如何設置列表的樣式。

網(wǎng)頁(yè)設計中與一個(gè)列表項元素關(guān)聯(lián)的標志可能在列表項內容之外，也可能處理為內容開(kāi)始處的一個(gè)內聯(lián)標志，這取決于屬性list-style-position的值，如果標志放在內部，那么這個(gè)列表項相對于其相鄰列表項就像一個(gè)塊級元素一樣，如圖7-26所示。

圖7-26：標志放在列表內部和外部

如果標志在內容之外，它會(huì )放在與內容左邊界有一定距離的位置上（對于從左向右讀的語(yǔ)言）。網(wǎng)頁(yè)設計中不論如何改變列表的樣式，標志與內容邊界的距離都不變。有時(shí)，標志可能會(huì )放在列表元素本身之外，如圖7-26所示。