2.4　行内元素和块级元素

在学习或者使用前端框架的时候也会经常遇到行内元素和块级元素，如果不能够详细地了解它们，很容易出现写的代码或者样式没有效果的情况。下面就来了解一下行内元素和块元素之间的定义以及区别。

1．行内元素

行内元素和其他元素都在一行上。行高及外边距和内边距不可改变。宽度就是其文字或图片的宽度，不可改变。内联元素只能容纳文本或者其他内联元素。

对行内元素，需要注意以下几点。

·　设置宽度width无效。

·　设置高度height无效，可以通过line-height来设置。

·　设置margin时，只有左右margin有效，上下无效。

·　设置padding时，只有左右padding有效，上下无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

通过display属性对行内元素和块级元素进行切换，常见的值如表2-1所示。

常见的HTML行内元素如表2-2所示。

行内元素代码如下所示：

行内元素运行效果如图2-2所示。

2．块级元素

块级元素会占据新的一行。块级元素中可以包含块级元素和行内元素。块级元素可以设置宽高，并且宽度、高度以及外边距、内填充都可随意控制。宽度没有设置时，默认为100%。

对块级元素，需要注意以下几点。

·　总是在新的一行开始。

·　行高以及外边距和内边距都可控制。

·　宽度缺省时，是它的容器的100%，除非设定一个宽度。

·　可以容纳内联元素和其他块元素。

常见的HTML块级元素如表2-3所示。

块级元素代码如下所示：

块级元素运行效果如图2-3所示。

下面介绍HTML中的行内元素、块状元素和行内块状元素之间的区别。

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。它们之间使用display可以进行相互转换。

·　display:inline，转换为行内元素。

·　display:block，转换为块状元素。

·　display:inline-block，转换为行内块状元素。

代码如下所示：

块级元素运行效果如图2-4所示。