網(wǎng)頁設(shè)計中的替換元素

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

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

網(wǎng)頁設(shè)計中內(nèi)邊距和邊框像平常一樣應(yīng)用到替換元素,內(nèi)邊距在具體內(nèi)容外插入空間,邊框圍繞著內(nèi)邊距。這個過程的不尋常之處在于,內(nèi)邊距和邊框確實(shí)會影響行框的高度,因?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;)

注意,第一個行框的高度足以包含這個圖像,第二個行框的高度則足以包含圖像、其內(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)框的底端與基線對齊。因此,實(shí)際上是下外邊距邊界與基線對齊,如圖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中的一個圖像也會放在基線上。

注意:寫作本書時,許多瀏覽器實(shí)際上會忽略這個網(wǎng)站建設(shè)CSS行內(nèi)格式化模型,不過基于Gecko的瀏覽器在顯示XHTML和嚴(yán)格的HTML文檔時確實(shí)會像上面那樣做。更多相關(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ù)的下外邊距,元素實(shí)際上會被向下拉,因?yàn)槠湫袃?nèi)框的底端將比其內(nèi)容區(qū)的底端高。因此,以下規(guī)則會得到如圖7-48所示的結(jié)果:

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

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

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

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:0871-63535511(點(diǎn)擊可一鍵撥號)