增加框?qū)傩?/h5>

有了以上了解，看上去向行內(nèi)替換元素應(yīng)用外邊距、邊距和內(nèi)邊距似乎很簡單。

網(wǎng)頁設(shè)計中內(nèi)邊距和邊框像平常一樣應(yīng)用到替換元素，內(nèi)邊距在具體內(nèi)容外插入空間，邊框圍繞著內(nèi)邊距。這個過程的不尋常之處在于，內(nèi)邊距和邊框確實會影響行框的高度，因為它們要作為行內(nèi)替換元素的行內(nèi)框的一部分（不同于行內(nèi)非替換元素）。考慮圖7-45，這是由以下樣式得到的：

img (height: 20px; width: 20px;)

img.one (margin: 0; padding: 0; border: 1px dotted;)

img.two (margin: 5px; padding: 3px; border: 1px solid;)

注意，第一個行框的高度足以包含這個圖像，第二個行框的高度則足以包含圖像、其內(nèi)邊距和邊框。

外邊距也包含在行框中，不過外邊距有自己的問題。網(wǎng)頁設(shè)計中設(shè)置正外邊距沒有什么特殊的地方，只是使替換元素的行內(nèi)框更高。設(shè)置負(fù)外邊距也有類似的效果：這會減少替換元素行內(nèi)框的大小，可以看到，負(fù)的上外邊距會把圖像上面的一行向下拉：

img.two {margin-top:-10px;}

當(dāng)然，負(fù)外邊距對塊級元素有也同樣的作用。在這種情況下，負(fù)外邊距會使替換元素的行內(nèi)框小于正常大小。負(fù)外邊距是使行內(nèi)替換元素擠入其他行的唯一辦法。

替換元素和基線

你現(xiàn)在可能注意到了，默認(rèn)地，行內(nèi)替換元素位于基線上，如果向替換元素增加下內(nèi)邊距、外邊距或邊框，內(nèi)容區(qū)會上移。轉(zhuǎn)換元素并沒有自己的基線，所以相對來講最好的辦法是將其行內(nèi)框的底端與基線對齊。因此，實際上是下外邊距邊界與基線對齊，如圖7-47所示。

網(wǎng)頁設(shè)計中這種基線對齊會有一個意想不到（而且不受歡迎）的后果：如果一個表單元格中只有一個圖像，這個圖像要讓表單元格足夠高，從而能把包含該圖像的行框包含在內(nèi)。即使沒有具體的文本，甚至沒有空白符，包含圖像的表單元格中還是會出現(xiàn)這種大小調(diào)整。因此，已經(jīng)使用多年的分片圖像和間隔GIF設(shè)計在現(xiàn)代瀏覽器中可能表現(xiàn)很糟糕?？紤]以下最簡單的情況：

td {font-size: 12px;}

<td><img src ="spacer.gif" height="1" width="10 "></td>

在CSS行內(nèi)格式化模型中，表單元格將是12像素高，圖像位于單元格的基線上。所以圖像下面可能有3像素的空間，上面有8像素的空間，不過具體的距離要取決于所用的字體系列及其基線的位置。這種行為并不僅限于表單元格中的圖像，只要一個行內(nèi)替換元素是塊級元素或表單元格元素中的唯一后代，都會有這種行為。例如，div中的一個圖像也會放在基線上。

注意：寫作本書時，許多瀏覽器實際上會忽略這個網(wǎng)站建設(shè)CSS行內(nèi)格式化模型，不過基于Gecko的瀏覽器在顯示XHTML和嚴(yán)格的HTML文檔時確實會像上面那樣做。更多相關(guān)信息請參考我的文章《Images, Tables, and Mysterious Gaps》(hllp://developer.moziUa.org/en/docs/ Images,_Tables,_and_Mysterious_Caps)。

對于這種情況，網(wǎng)站建設(shè)最常用的解決方法是使間隔圖像成為塊級元素，這樣它們就不會生成行框。例如：

td {font-size: 12px;}

img.block {display: block;}

<td><img src="spacer.gif" height="1" width="10" class="block"></td>

另一個可取的修正辦法是，將包含圖像的表單元格的font-size和line-height都設(shè)置為1px，這會使行框的高度只能放下1像素的圖像。

行內(nèi)替換元素位于基線上還有一個有意思的效果：如果應(yīng)用一個負(fù)的下外邊距，元素實際上會被向下拉，因為其行內(nèi)框的底端將比其內(nèi)容區(qū)的底端高。因此，以下規(guī)則會得到如圖7-48所示的結(jié)果：

p img [margin-bottom:-10px;}

這很可能使得一個替換元素擠進(jìn)后面的文本行。

警告：有些瀏覽器只是把內(nèi)容區(qū)的底端放在基線上，而忽略負(fù)的下外邊距。