内联元素的两大基石之基线

前提

通常，块级元素负责结构，内联元素负责内容。
内联元素可以在同一行，按照从左至右的顺序显示，不会单独占一行。这就涉及到，同一行盒子中多个内联元素在水平和垂直方向上的对齐方式。
水平方向上，常见的左中右对齐使用 text-align 属性即可实现；而垂直对齐，则使用 vertical-align 属性实现。

例子1：顶部对齐

<style>
    p {
        background-color: #eee;
        border: 2px red solid;
        line-height: 120px;
        text-align: center;
    }
    
    span {
        display: inline-block;
        line-height: 1.5;
        background-color: seagreen;
        padding: 5px 10px;
        color: #fff;
        vertical-align: top;
    }
    
    span:first-child {
        font-size: 20px;
    }
    
    span:last-child {
        font-size: 12px;
    }
</style>

<p>
    <span>顶部<br>对齐</span>
    <span>顶部<br>对齐</span>
    <span>顶部<br>对齐</span>
</p>

例子2：居中对齐

<style>
    p {
        background-color: #eee;
        border: 2px red solid;
        line-height: 120px;
        text-align: center;
    }
    
    span {
        display: inline-block;
        line-height: 1.5;
        background-color: seagreen;
        padding: 5px 10px;
        color: #fff;
        vertical-align: middle;
    }
    
    span:first-child {
        font-size: 20px;
    }
    
    span:last-child {
        font-size: 12px;
    }
</style>

<p>
    <span>居中<br>对齐</span>
    <span>居中<br>对齐</span>
    <span>居中<br>对齐</span>
</p>

例子3：底部对齐

<style>
    p {
        background-color: #eee;
        border: 2px red solid;
        line-height: 120px;
        text-align: center;
    }
    
    span {
        display: inline-block;
        line-height: 1.5;
        background-color: seagreen;
        padding: 5px 10px;
        color: #fff;
        vertical-align: bottom;
    }
    
    span:first-child {
        font-size: 20px;
    }
    
    span:last-child {
        font-size: 12px;
    }
</style>

<p>
    <span>底部<br>对齐</span>
    <span>底部<br>对齐</span>
    <span>底部<br>对齐</span>
</p>

基线

垂直对齐的发生，一定是基于某个参照物的，比如我们把上例中的 vertical-align 属性值设置为 5px，可以猜到，3 个 span 元素一定向上移动了 5px，但是这个移动的初始位置在哪里呢？

例子：

<style>
    p {
        background-color: #eee;
        border: 2px red solid;
        line-height: 120px;
        text-align: center;
    }
    
    span {
        display: inline-block;
        line-height: 1.5;
        background-color: seagreen;
        padding: 5px 10px;
        color: #fff;
        vertical-align: 5px;
    }
    
    span:first-child {
        font-size: 20px;
    }
    
    span:last-child {
        font-size: 12px;
    }
</style>

<p>
    <span>向上<br>5px</span>
    <span>向上<br>5px</span>
    <span>向上<br>5px</span>
</p>

这个初始位置就是基线( baseline )。
基线是垂直对齐的基础，vertical-align 的默认值便是基线对齐。
根据规范，字母 x 的下边线即为基线。汉字或部分英文字母的下边线要低于字母 x 的下边线，但仍然以字母 x 的下边线为标准。

行盒子的基线

内联元素的垂直对齐都是发生在行盒子当中，因此找到行盒子的基线显得尤为重要。
在这里，又需要提及透明文本节点(1)。这个文本其实可以当作字母 x 去理解，因此，行盒子里面的所有内联元素，都是基于这个透明 x 节点进行垂直对齐的。

*(1)透明文本节点的内容，可以参考：内联元素的两大基石之 line-height

例子1：默认情况下，内联元素都是基线对齐

<style>
    p {
        background-color: #eee;
        border: 2px red solid;
        line-height: 120px;
        text-align: center;
    }
    
    span {
        display: inline-block;
        line-height: 1.5;
        background-color: seagreen;
        padding: 5px 10px;
        color: #fff;
    }
    
    span:first-child {
        font-size: 20px;
    }
    
    span:last-child {
        font-size: 12px;
    }
</style>

<p>
    <span>基线<br>x对齐</span>
    <span>基线<br>x对齐</span>
    <span>基线<br>x对齐</span>
</p>

例子2：span 元素基线向上移动 20px

<style>
    p {
        background-color: #eee;
        border: 2px red solid;
        line-height: 200px;
        text-align: center;
    }
    
    span {
        display: inline-block;
        line-height: 1.5;
        background-color: seagreen;
        padding: 5px 10px;
        color: #fff;
        vertical-align: 20px;
    }
    
    span:first-child {
        font-size: 20px;
    }
    
    span:last-child {
        font-size: 12px;
    }
</style>

<p>
    <span>基线<br>x对齐</span>
    <span>基线<br>x对齐</span>
    <span>基线<br>x对齐</span>
</p>

内联元素的基线

首先，对于标准内联元素( 无论是否有内容 )和匿名内联元素( 文字 )，都是完全遵守基线定义的，即以字母 x 下边线作为基线。

例子：

<style>
    p {
        background-color: #eee;
        border: 2px red solid;
        line-height: 120px;
        text-align: center;
    }
    
    span {
        background-color: seagreen;
        font-size: 24px;
        padding: 5px 10px;
        border: 2px #795548 solid;
        margin: 2px;
        color: #fff;
    }
</style>

<p>
    x基线<span>x对齐</span><span></span>
</p>

其次，由于历史原因，很多有着内联盒子特点，但又不完全遵循内联盒子规则的元素都统一规划到替换元素之中。同样，替换元素在基线的处理上，和标准内联元素也是大相径庭。
以 img 为代表的替换元素，其基线是 margin 的下边线；类似的还有 iframe、canvas、video、textarea 等。

例子：

<style>
    p {
        background-color: #eee;
        line-height: 120px;
        text-align: center;
    }
    
    img {
        background-color: seagreen;
        width: 100px;
        border: 5px #795548 solid;
        padding: 5px;
        margin: 5px;
    }
</style>

<p>
    x
    <img src="ff.jpg">
</p>

以 input 为代表的替换元素，其基线是元素里面文字的基线( 字母 x 下边线 )，类似的还有 select 等。

例子：

<style>
    p {
        background-color: #eee;
        line-height: 120px;
        text-align: center;
    }
    
    input {
        background-color: seagreen;
        line-height: 2;
        border: 5px #795548 solid;
        padding: 5px;
        margin: 5px;
        color: #fff;
    }
</style>

<p>
    x
    <input type="text" value="x-hello">
</p>

*现有的规范中，并没有替换元素基线的详细说明，因此在使用这些元素时，会因浏览器不同而表现出差异性，需要多加注意。

最后，对于内联级元素( inline-block 的元素 )，如果元素里面没有内联元素，则该元素的基线就是其 margin 的下边线；如果元素里面有内联元素，则该元素的基线就是元素里面最后一行内联元素的基线：

例子：

<style>
    p {
        background-color: #eee;
        line-height: 120px;
        text-align: center;
    }
    
    span {
        display: inline-block;
        width: 50px;
        height: 40px;
        line-height: 1;
        background-color: seagreen;
        padding: 5px;
        margin: 5px;
        color: #fff;
    }
</style>

<p>
    x
    <span></span>
    <span>x</span>
</p>

---

如有错误，欢迎指正，本人不胜感激。