CSS 块级元素与行内元素

什么是 CSS 的块级元素与行内元素？

“块级元素”(block element)与“行内元素”(inline element)是 CSS 中的重要概念。

先来看一些具体的示例。

一个块级元素的示例：

结果如下：

不难发现，尽管代码中我们把三个 div 元素都定义在同一行内，元素中的内容也很简短，可它们每个都是占据了一整行！

为块级元素增加背景颜色

为看得更加清晰，我们为每个 div 都增加一个背景颜色（及相应字体颜色，代码略）：

				div.b {background-color: blue;}
				div.r {background-color: red;}
				div.g {background-color: green;}
			

块级元素

现在我们来总结一下什么是块级元素（block element）：

块级元素会生成一个框（或盒子，box），在正常流中，会在其框之前或之后生成“换行”，缺省情况下会占据所在元素内的全部宽度。

一个行内元素的示例

说完了块级元素，现在我们来看一个行内元素的示例：

				span.b {background-color: blue;}
				span.r {background-color: red;}
				span.g {background-color: green;}
			

我们把 div 换成了 span，也故意写在了不同的行里，结果如下：

不难发现，它们与它们之前及之后的内容都显示在了同一行！

行内元素

现在我们来总结一下什么是行内元素（inline element）：

行内元素也会生成一个框（或盒子，box），但不会在其框之前或之后生成“换行”，缺省情况下也只会占据必要的宽度。

块级元素与行内元素的其它区别

现在，我们明白了两种元素的一个最主要的区别：

一个是独立的占据一行，另一个则不是。

那么它们还有其它的什么区别吗？让我们继续探讨！

为块级元素指定宽度

现在，为之前的块级元素指定一个 300px 的宽度。

				div.bc > div {width: 300px;}/* bc: block container */
			

为行内元素指定宽度

现在，为之前的行内元素指定一个 150px 的宽度。

				/* ic: inline container */
				div.ic > span {width: 150px;}
			

结果如下，宽度并没有生效：

块级元素与行内元素的在宽度属性上的差异

通过前面两个例子，我们知道了，尽管元素都有 width 属性，但当我们为一个行内元素指定宽度时，却并不会生效。

这告诉我们，某些元素属性对元素是否为块级或行内元素是敏感的。

如果你设置了一个属性值，发现其并不生效，就要考虑是否存在某种限制。

改变元素的缺省 display 属性

元素的块级或行内的显示行为是可以通过 display 属性来调整的。

我们说 div 是块级元素，是因为它缺省的显示属性值为：display:block

而 span 它缺省的显示属性值则为：display:inline

不过，我们也可以改变这些缺省值！

把 span 设置为 block 元素

可以把 span 的 display 值设为 block：

				/* bs: block span */
				div.bs > span {display: block;width: 150px;}
			

结果如下，跟 div 类似，span 元素也自成一行，宽度也生效了：

调整 span 显示为 inline-block

如果仅仅想要宽度生效，不想换行，则可以考虑设置为 inline-block：

				/* ibs: inline-block span */
				div.ibs > span {display: inline-block;width: 150px;}
			

结果如下：

常见的 block 元素

• div
• section
• h1~h6(标题)
• form(表单)
• p（段落）

常见的 inline 元素

• span
• a（锚，超链接）
• img（图片）