行內塊元素

看上去值名inline-block是一個混合產物，實際上也確實如此，行內塊元素（inline-block element）確實是塊級元素和行內元素的混合，這個display值是網站建設CSS2.1中新增的。

行內塊元素作為一個行內框與其他元素和內容相關。換句話說，它就像圖像一樣放在一個文本行中，實際上，行內塊元素會作為替換元素放在行中。這說明，網頁設計中行內塊元素的底端默認地位于文本行的基線上，而且內部沒有行分隔符。

在行內塊元素內部，會像塊級元素一樣設置內容的格式。就像所有塊級或行內替換元素一樣，行內塊元素也有屬性width和height，如果比周圍內容高，這些屬性會使行高增加。

下面來考慮一些示例標記，它們能更清楚地說明這一點：

<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>

對以上標記，應用下面的規則：

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;}

注意，在第二個div中，行內段落格式化為正常的行內內容，這說明width和text- align被忽略了（它們不能應用于行內元素）。不過，對于第三個div元素，作為行內塊元素的段落則有這兩個屬性，因為它作為一個塊級元素被格式化，這個段落還要求文本行更高一些，因為它會影響行高，就好像這是一個替換元素一樣。

網頁設計中如果行內塊元素的width未定義，或者顯式聲明為auto，元素框會收縮以適應內容。也就是說，元素框的寬度剛好足夠包含該內容，而沒有多余的空間。行內框也會這樣做，不過行內框可能會跨多個文本行，而行內塊元素不能。因此，以下規則應用到前面的示例標記時：

div#three p {display: inline-block; height: 2em;}

會創建一個較高的框，它的寬度剛好能包含內容，如圖7-52所示。

有時行內塊元素很有用，例如，如果有5個超鏈接，網站建設人員希望它們在一個工具條中寬度相等。為了讓它們分別占其父元素寬度的20%，但是仍保持其為行內元素，可以聲明如下：

#navbar a {display: inline-block; width: 20%;}