网页设计中除了块级元素，最常见的就是行内元素了。通过为行内元素设置框属性，可以进入到一个更有意思的领域（迄今为止，本书还没涉入过这个领域）。行内元素有一些很好的例子，如em标志和a标志，这两个标志都是非替换元素，另外图像也属于行内元素，不过图像是替换元素。

警告：本节介绍的所有行为都不适用于表元素。网页建设中CSS2对于表和表内容的处理引入了一些新的属性和行为，表元素的表现与块级元素或行内元素大相径庭。表样式将在第11章讨论。

非替换元素和替换元素在内联内容方面的处理稍有不同，讨论行内元素的构造时我们将分别进行讨论。

行布局

首先，需要理解内联内容如何布局。网页设计中对于行内元素来说，这没有块级元素那么简单和直接，块级元素只是生成框，通常不允许其他内容与这些框并存。下面做个对照，来看一个块级元素的内部（如一个段落）。你可能会问：“所有文本行是怎么放在这里的？是谁在控制它们的摆放？我能做些什么？”

为了理解如何生成行，首先来考虑这样一种情况，一个元素包含一个很长的文本行，如图7-27所示。注意，这里将整行包围在一个span元素中，从而为这一行加了一个边框，然后为之指定边框样式：

span {border:1px dashed black;}

图7-27显示了行内元素包含在一个块级元素中的最简单的情况。就其本身来说，这与包含两个词的段落没有什么区别。唯一的区别是，图7-27中有几十个词，而大多数段落不会包含诸如span之类的显式行内元素。

如果不是这种最简单的状况，来看我们更熟悉的情况，你所要做的只是确定元素应当有多宽，然后断行，使断开的各部分能适应元素的宽度刚好放下。

什么都没变。你所做的只是将一行分成多个部分，然后把这些部分一个挨一个地堆放。

每个文本行的边框刚好与各行的顶端和底端吻合。这是因为没有为行内文本设置内边距或外边距。注意，实际上边框彼此稍有些重叠，例如，第一行的下边框就在下一行上边框的下面。这是因为边框实际上画在各行之外的下一个像素上（假设你使用的是显示器由于各行紧挨着，所以其边框会重叠。

网页设计中如果改变span样式，使之有一个背景色，这些行的具体摆放就很清楚了。下面来看图7-29，其中包含4个段落，每个段落有不同的text-align值，而且每个段落的文本行都有背景。

可以看到，网页设计中并不是每一行都达到其父段落内容区的边界，父段落内容区用一个灰色虚线边框指示。对于左对齐的段落，行都压到段落内容区的左边对齐，各行在换行处结束。右对齐的段落则恰好相反。居中段落中，文本行的中心与段落的中心对齐。在最后一种情况下，即text-align的值为justify，各行必须与段落的内容区宽度相等，所以行边界要达到段落的内容边界。要调整各行中字母和字之间的间隔来弥补行实际长度与段落宽度之间的差距。因此，文本两端对齐时word-spacing的值可能被覆盖（如果letter-spacing是一个长度值，这个值则不能被覆盖）。

这就很好地说明了这些最简单的情况下文本行是如何生成的。不过，后面将会看到，行内格式化模型远没有这么简单。