看上去值名inline-block是一個(gè)混合產(chǎn)物，實(shí)際上也確實(shí)如此，行內(nèi)塊元素（inline-block element）確實(shí)是塊級元素和行內(nèi)元素的混合，這個(gè)display值是網(wǎng)站建設(shè)CSS2.1中新增的。
行內(nèi)塊元素作為一個(gè)行內(nèi)框與其他元素和內(nèi)容相關(guān)。換句話說，它就像圖像一樣放在一個(gè)文本行中，實(shí)際上，行內(nèi)塊元素會作為替換元素放在行中。這說明，網(wǎng)頁設(shè)計(jì)中行內(nèi)塊元素的底端默認(rèn)地位于文本行的基線上，而且內(nèi)部沒有行分隔符。
在行內(nèi)塊元素內(nèi)部，會像塊級元素一樣設(shè)置內(nèi)容的格式。就像所有塊級或行內(nèi)替換元素一樣，行內(nèi)塊元素也有屬性width和height，如果比周圍內(nèi)容高，這些屬性會使行高增加。
下面來考慮一些示例標(biāo)記，它們能更清楚地說明這一點(diǎn)：
<div id="one">
This text is the content of a block-level level element. Within this
block-level element is another block-level element.<p>Look, it's a
block-level paragraph.</p> Here's the rest of the DIV, which is still block-level.
</div>
<div id="two">
This text is the content of a block-level level element. Within this
block-level element is an inline element.<p>Look, it's an inline
paragraph.</p> Here's the rest of the DIV, which is still block-level.
</div>
<div id="three">
This text is the content of a block-level level element. Within this
block-level element is an inline-block element.<p>Look, it's an inline block
paragraph.</p> Here's the rest of the DIV, which is still block-level.
</div>
對以上標(biāo)記，應(yīng)用下面的規(guī)則：
div {margin: 1em 0; border: 1px solid;}
p {border: 1px dotted;}
div#one p {display: block; width: 6em; text-align: center;}
div#two p {display: inline; width: 6em; text-align: center;}
div#three p {display: inline-block: width: 6em; text-align: center;}
注意，在第二個(gè)div中，行內(nèi)段落格式化為正常的行內(nèi)內(nèi)容，這說明width和text- align被忽略了（它們不能應(yīng)用于行內(nèi)元素）。不過，對于第三個(gè)div元素，作為行內(nèi)塊元素的段落則有這兩個(gè)屬性，因?yàn)樗鳛橐粋€(gè)塊級元素被格式化，這個(gè)段落還要求文本行更高一些，因?yàn)樗鼤绊懶懈?，就好像這是一個(gè)替換元素一樣。
網(wǎng)頁設(shè)計(jì)中如果行內(nèi)塊元素的width未定義，或者顯式聲明為auto，元素框會收縮以適應(yīng)內(nèi)容。也就是說，元素框的寬度剛好足夠包含該內(nèi)容，而沒有多余的空間。行內(nèi)框也會這樣做，不過行內(nèi)框可能會跨多個(gè)文本行，而行內(nèi)塊元素不能。因此，以下規(guī)則應(yīng)用到前面的示例標(biāo)記時(shí)：
div#three p {display: inline-block; height: 2em;}
會創(chuàng)建一個(gè)較高的框，它的寬度剛好能包含內(nèi)容，如圖7-52所示。
有時(shí)行內(nèi)塊元素很有用，例如，如果有5個(gè)超鏈接，網(wǎng)站建設(shè)人員希望它們在一個(gè)工具條中寬度相等。為了讓它們分別占其父元素寬度的20%，但是仍保持其為行內(nèi)元素，可以聲明如下：
#navbar a {display: inline-block; width: 20%;}