行内格式化

相对于熟知的块级格式化上下文，行内格式化上下文更加的复杂难明。行内元素不像块级元素那样直来直去，一个块级元素占据一行，其他块级元素在垂直方向依次向下排列即可。行内元素不同，多个行内元素可以在一行显示，那么，在一行中多个行内元素是怎么排布的，下面就试着解释一下。

构建一行

首先我们来理解一行由哪些东西构成：

<p>
    xem
    <span>
    	行内框
    </span>
    <img style="width: 40px; height: 40px; margin: 10px;" src="" />
</p>

上面有一个匿名文本，一个行内框也就是行内非替换元素<span>，一个行内替换元素<img />

匿名文本 xem

是指没有元素包裹直接暴露在父元素下的文本。

这些文本应该占多大的地方？其实每一个文本字符都会有一个em框（见图：1-1），那么em框有了，多个em框就组成了一个内容区（见图1-1）。好，我们上面的匿名文本就先这样，当然还没有完事，下面继续。

em框

em框是在字体中定义的，并且高度和font-size的值一致。

图1-1

行内框

span这样的行内元素会形成一个行内框（匿名文本也会形成），这个行内框是按照上面匿名文本形成内容区域的步骤形成内容区域后在加上行间距形成的。又出现了一个行间距。

行间距又是哪里来的？行间距是行高（line-height）减去内容区高度得到的。

我们得到了行间距，然后将行间距再除以2分别放在内容区上面和下面形成了行内框（见图：1-2）。

图1-2

img元素

img元素是一个替换元素，替换元素会形成一个内容区，并且行高不能作用于替换元素，所以对于替换元素来说不存在行间距这个东西。那么替换元素内容区域的高度是咋计算的？计算方式和非替换元素计算方式不同，不仅有替换原宿自身宽高还包括了padding，border和margin的值。我们都知道非替换元素垂直方向margin，padding和border是不占位置的，但是替换元素是占位置的（见图：1-3）。

图1-3

行框

行框中存在了上面几个元素（不是指的标签），那么怎么计算行框所占据的高度？行框会计算，基线与行框最高点，和行框最低点距离即可。

通过这个描述就能看出来，line-height只能表示一个行的最小高度，不是一个行的高度（见图：1-4）。

图1-3

基线

基线位置是使用的字体决定的，一般是小写字母x的下边缘。

行内格式化完成。