众所周知，css中可以将元素分成块级元素和行内元素。

对于块级元素可以通过margin、padding、border来设置盒子的样式。还可以通过box-sizing来设置盒子的类型。

但对于行内元素大部分人就知之甚少，这篇文章简单的谈一下我对行内元素的理解。

哪些元素是内联元素

就行为表现来看，“内联元素”的典型特征就是可以和文字在一行显示。因此，文字是内
联元素，图片是内联元素，按钮是内联元素，输入框、下拉框等原生表单控件也是内联元素。但是，这个说法有一个前提，元素没有脱离标准流。否则，像浮动和定位元素也可以和文字在一行显示，但他们不是行内元素。

内联盒模型

在页面中，块级元素负责布局，行内元素负责内容。一个块级元素中很可能不止有一个行内元素。

下面是一段普通的HTML

<p>我是普通的文字，这里有个 一<span>span</span> 标签。</p>

1. 内容区域

内容区域指一种围绕文字看不见的盒子，其大小仅受字符本身特性控制，我们可以把文本选中的背景色区域作为内容区域(::selection)；但是有些元素，如图片这样的替换元素，其内容显然不是文字，不存在字符盒子之类的，因此，对于这些元素，内容区域可以看成元素自身。

2. 内联盒子

每一个内联元素都是一个内联盒子，内联盒子使元素排成一行，用来决定元素是内联还是块级。

该盒子又可以细分为“内联盒子”和“匿名内联盒子”两类：

如果外部含内联标签（<span>、<a>、<em>等），则属于“内联盒子”；如果是个光秃秃的文字，则属于“匿名内联盒子”。

3. 行框盒子

实际中，一个块级元素可能有很多行的内容，类似小说网站。每一行就是一个“行框盒子”（实线框标注），每个“行框盒子”又是由一个一个“内联盒子”组成的。石家巷line-height就是作用在行框盒子上。

4. 包含块

此盒子由一行一行的行框盒子组成，在这个例子中<p>标签就是一个包含块。