內邊距和行內元素

對于網(wǎng)站建設中的行內元素，外邊距和內邊距存在一個(gè)重要的區別。為說(shuō)明這一點(diǎn)，下面先來(lái)看左右內邊距。如果為左右內邊距設置了值，左右內邊距將是可見(jiàn)的：

strong{padding-left:10px;padding-right:10px;background:silver;}

注意，行內非替換元素的兩端都出現了額外的空背景。這是所設置的內邊距。像外邊距一樣，左內邊距應用到元素的開(kāi)始處，右內邊距應用到元素的最后，不過(guò)，內邊距不會(huì )應用到各行的左右兩邊。對于替換元素也是如此，不過(guò)當然這種元素不會(huì )跨行。

理論上，對于有背景色和內邊距的行內非替換元素，背景可以向元素上面和下面延伸：

strong{padding-top:0.5em;background-color:silver;}

當然，行高沒(méi)有改變，不過(guò)由于內邊距確實(shí)能延伸背景，所以背景應該可見(jiàn)，是這樣嗎？不錯，背景確實(shí)可見(jiàn)，它與前面的行重疊，這正是我們期望的結果。

內邊距和替換元素

盡管看上去可能有些奇怪，不過(guò)確實(shí)可以向替換元素應用內邊距，但在寫(xiě)作本書(shū)時(shí)這方面還存在一些限制，最讓人奇怪的是，可以向圖像應用內邊距，如下：

img{background:silver;padding:1em;}

不論替換元素是塊級元素還是行內元素，內邊距都會(huì )圍繞其內容，背景色將填入該內邊距，如圖8-45所示。還可以看到內邊距會(huì )把元素的邊框推離其內容。

不過(guò)，在網(wǎng)頁(yè)設計中，關(guān)于如何對表單元素（如input）設置樣式還存在一些混淆。例如，復選框的內邊距在哪里就不是很清楚。因此，在寫(xiě)作本書(shū)時(shí)，有些瀏覽器（如Mozilla）會(huì )忽略表單元素的內邊距（或其他形式的樣式）?？赡軐?lái)會(huì )出現一個(gè)網(wǎng)站建設規范描述表單元素的樣式。

另一個(gè)可能的限制是，很多較老的瀏覽器不向圖像應用內邊距，包括Windows平臺的IE5。

小結

能夠向所有元素應用外邊距、邊框和內邊距，是網(wǎng)站建設超越傳統Web標記語(yǔ)言的要素之一。過(guò)去，如果要把一個(gè)標題放在一個(gè)有邊框的有色方框中，就意味著(zhù)要把這個(gè)標題包圍在一個(gè)表中，只是為了創(chuàng )建如此簡(jiǎn)單的效果，這么做確實(shí)是一種很笨拙的辦法。正是這種強大的功能使得CSS如此流行。