內(nèi)邊距和行內(nèi)元素

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

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

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

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

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

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

內(nèi)邊距和替換元素

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

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

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

不過，在網(wǎng)頁設(shè)計中，關(guān)于如何對表單元素（如input）設(shè)置樣式還存在一些混淆。例如，復(fù)選框的內(nèi)邊距在哪里就不是很清楚。因此，在寫作本書時，有些瀏覽器（如Mozilla）會忽略表單元素的內(nèi)邊距（或其他形式的樣式）。可能將來會出現(xiàn)一個網(wǎng)站建設(shè)規(guī)范描述表單元素的樣式。

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

小結(jié)

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