增加框屬性

有了以上了解，看上去向行內替換元素應用外邊距、邊距和內邊距似乎很簡單。

網頁設計中內邊距和邊框像平常一樣應用到替換元素，內邊距在具體內容外插入空間，邊框圍繞著內邊距。這個過程的不尋常之處在于，內邊距和邊框確實會影響行框的高度，因為它們要作為行內替換元素的行內框的一部分（不同于行內非替換元素）?？紤]圖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;)

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

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

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

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

替換元素和基線

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

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

td {font-size: 12px;}

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

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

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

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

td {font-size: 12px;}

img.block {display: block;}

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

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

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

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

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

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