網(wǎng)頁設(shè)計中除了塊級元素，最常見的就是行內(nèi)元素了。通過為行內(nèi)元素設(shè)置框?qū)傩裕梢赃M(jìn)入到一個更有意思的領(lǐng)域（迄今為止，本書還沒涉入過這個領(lǐng)域）。行內(nèi)元素有一些很好的例子，如em標(biāo)志和a標(biāo)志，這兩個標(biāo)志都是非替換元素，另外圖像也屬于行內(nèi)元素，不過圖像是替換元素。

警告：本節(jié)介紹的所有行為都不適用于表元素。網(wǎng)頁建設(shè)中CSS2對于表和表內(nèi)容的處理引入了一些新的屬性和行為，表元素的表現(xiàn)與塊級元素或行內(nèi)元素大相徑庭。表樣式將在第11章討論。

非替換元素和替換元素在內(nèi)聯(lián)內(nèi)容方面的處理稍有不同，討論行內(nèi)元素的構(gòu)造時我們將分別進(jìn)行討論。

行布局

首先，需要理解內(nèi)聯(lián)內(nèi)容如何布局。網(wǎng)頁設(shè)計中對于行內(nèi)元素來說，這沒有塊級元素那么簡單和直接，塊級元素只是生成框，通常不允許其他內(nèi)容與這些框并存。下面做個對照，來看一個塊級元素的內(nèi)部（如一個段落）。你可能會問：“所有文本行是怎么放在這里的？是誰在控制它們的擺放？我能做些什么？”

為了理解如何生成行，首先來考慮這樣一種情況，一個元素包含一個很長的文本行，如圖7-27所示。注意，這里將整行包圍在一個span元素中，從而為這一行加了一個邊框，然后為之指定邊框樣式：

span {border:1px dashed black;}

圖7-27顯示了行內(nèi)元素包含在一個塊級元素中的最簡單的情況。就其本身來說，這與包含兩個詞的段落沒有什么區(qū)別。唯一的區(qū)別是，圖7-27中有幾十個詞，而大多數(shù)段落不會包含諸如span之類的顯式行內(nèi)元素。

如果不是這種最簡單的狀況，來看我們更熟悉的情況，你所要做的只是確定元素應(yīng)當(dāng)有多寬，然后斷行，使斷開的各部分能適應(yīng)元素的寬度剛好放下。

什么都沒變。你所做的只是將一行分成多個部分，然后把這些部分一個挨一個地堆放。

每個文本行的邊框剛好與各行的頂端和底端吻合。這是因為沒有為行內(nèi)文本設(shè)置內(nèi)邊距或外邊距。注意，實際上邊框彼此稍有些重疊，例如，第一行的下邊框就在下一行上邊框的下面。這是因為邊框?qū)嶋H上畫在各行之外的下一個像素上（假設(shè)你使用的是顯示器由于各行緊挨著，所以其邊框會重疊。

網(wǎng)頁設(shè)計中如果改變span樣式，使之有一個背景色，這些行的具體擺放就很清楚了。下面來看圖7-29，其中包含4個段落，每個段落有不同的text-align值，而且每個段落的文本行都有背景。

可以看到，網(wǎng)頁設(shè)計中并不是每一行都達(dá)到其父段落內(nèi)容區(qū)的邊界，父段落內(nèi)容區(qū)用一個灰色虛線邊框指示。對于左對齊的段落，行都壓到段落內(nèi)容區(qū)的左邊對齊，各行在換行處結(jié)束。右對齊的段落則恰好相反。居中段落中，文本行的中心與段落的中心對齊。在最后一種情況下，即text-align的值為justify，各行必須與段落的內(nèi)容區(qū)寬度相等，所以行邊界要達(dá)到段落的內(nèi)容邊界。要調(diào)整各行中字母和字之間的間隔來彌補行實際長度與段落寬度之間的差距。因此，文本兩端對齊時word-spacing的值可能被覆蓋（如果letter-spacing是一個長度值，這個值則不能被覆蓋）。

這就很好地說明了這些最簡單的情況下文本行是如何生成的。不過，后面將會看到，行內(nèi)格式化模型遠(yuǎn)沒有這么簡單。