有了以上了解，看上去向行內(nèi)替換元素應(yīng)用外邊距、邊距和內(nèi)邊距似乎很簡(jiǎn)單。
網(wǎng)頁(yè)設(shè)計(jì)中內(nèi)邊距和邊框像平常一樣應(yīng)用到替換元素，內(nèi)邊距在具體內(nèi)容外插入空間，邊框圍繞著內(nèi)邊距。這個(gè)過(guò)程的不尋常之處在于，內(nèi)邊距和邊框確實(shí)會(huì)影響行框的高度，因?yàn)樗鼈円鳛樾袃?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;)
注意，第一個(gè)行框的高度足以包含這個(gè)圖像，第二個(gè)行框的高度則足以包含圖像、其內(nèi)邊距和邊框。
外邊距也包含在行框中，不過(guò)外邊距有自己的問(wèn)題。網(wǎng)頁(yè)設(shè)計(jì)中設(shè)置正外邊距沒(méi)有什么特殊的地方，只是使替換元素的行內(nèi)框更高。設(shè)置負(fù)外邊距也有類似的效果：這會(huì)減少替換元素行內(nèi)框的大小，可以看到，負(fù)的上外邊距會(huì)把圖像上面的一行向下拉：
img.two {margin-top:-10px;}
當(dāng)然，負(fù)外邊距對(duì)塊級(jí)元素有也同樣的作用。在這種情況下，負(fù)外邊距會(huì)使替換元素的行內(nèi)框小于正常大小。負(fù)外邊距是使行內(nèi)替換元素?cái)D入其他行的唯一辦法。
你現(xiàn)在可能注意到了，默認(rèn)地，行內(nèi)替換元素位于基線上，如果向替換元素增加下內(nèi)邊距、外邊距或邊框，內(nèi)容區(qū)會(huì)上移。轉(zhuǎn)換元素并沒(méi)有自己的基線，所以相對(duì)來(lái)講最好的辦法是將其行內(nèi)框的底端與基線對(duì)齊。因此，實(shí)際上是下外邊距邊界與基線對(duì)齊，如圖7-47所示。
網(wǎng)頁(yè)設(shè)計(jì)中這種基線對(duì)齊會(huì)有一個(gè)意想不到（而且不受歡迎）的后果：如果一個(gè)表單元格中只有一個(gè)圖像，這個(gè)圖像要讓表單元格足夠高，從而能把包含該圖像的行框包含在內(nèi)。即使沒(méi)有具體的文本，甚至沒(méi)有空白符，包含圖像的表單元格中還是會(huì)出現(xiàn)這種大小調(diào)整。因此，已經(jīng)使用多年的分片圖像和間隔GIF設(shè)計(jì)在現(xiàn)代瀏覽器中可能表現(xiàn)很糟糕?？紤]以下最簡(jiǎn)單的情況：
td {font-size: 12px;}
<td><img src ="spacer.gif" height="1" width="10 "></td>
在CSS行內(nèi)格式化模型中，表單元格將是12像素高，圖像位于單元格的基線上。所以圖像下面可能有3像素的空間，上面有8像素的空間，不過(guò)具體的距離要取決于所用的字體系列及其基線的位置。這種行為并不僅限于表單元格中的圖像，只要一個(gè)行內(nèi)替換元素是塊級(jí)元素或表單元格元素中的唯一后代，都會(huì)有這種行為。例如，div中的一個(gè)圖像也會(huì)放在基線上。
注意：寫作本書(shū)時(shí)，許多瀏覽器實(shí)際上會(huì)忽略這個(gè)網(wǎng)站建設(shè)CSS行內(nèi)格式化模型，不過(guò)基于Gecko的瀏覽器在顯示XHTML和嚴(yán)格的HTML文檔時(shí)確實(shí)會(huì)像上面那樣做。更多相關(guān)信息請(qǐng)參考我的文章《Images, Tables, and Mysterious Gaps》(hllp://developer.moziUa.org/en/docs/ Images,_Tables,_and_Mysterious_Caps)。
對(duì)于這種情況，網(wǎng)站建設(shè)最常用的解決方法是使間隔圖像成為塊級(jí)元素，這樣它們就不會(huì)生成行框。例如：
td {font-size: 12px;}
img.block {display: block;}
<td><img src="spacer.gif" height="1" width="10" class="block"></td>
另一個(gè)可取的修正辦法是，將包含圖像的表單元格的font-size和line-height都設(shè)置為1px，這會(huì)使行框的高度只能放下1像素的圖像。
行內(nèi)替換元素位于基線上還有一個(gè)有意思的效果：如果應(yīng)用一個(gè)負(fù)的下外邊距，元素實(shí)際上會(huì)被向下拉，因?yàn)槠湫袃?nèi)框的底端將比其內(nèi)容區(qū)的底端高。因此，以下規(guī)則會(huì)得到如圖7-48所示的結(jié)果：
p img [margin-bottom:-10px;}
這很可能使得一個(gè)替換元素?cái)D進(jìn)后面的文本行。
警告：有些瀏覽器只是把內(nèi)容區(qū)的底端放在基線上，而忽略負(fù)的下外邊距。
當(dāng)前文章標(biāo)題：網(wǎng)頁(yè)設(shè)計(jì)中的替換元素
當(dāng)前URL：http://www.gtalker.cn/news/wzzz/replace-element.html
