行内块元素

看上去值名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%;}