通常，块级元素负责结构，内联元素负责内容。
内联元素可以在同一行，按照从左至右的顺序显示，不会单独占一行。这就涉及到，同一行盒子中多个内联元素在水平和垂直方向上的对齐方式。
水平方向上，常见的左中右对齐使用 text-align 属性即可实现；而垂直对齐，则使用 vertical-align 属性实现。
例子1：顶部对齐
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; } 顶部
对齐 顶部
对齐 顶部
对齐
例子2：居中对齐
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; } 居中
对齐 居中
对齐 居中
对齐
例子3：底部对齐
基线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; } 底部
对齐 底部
对齐 底部
对齐
垂直对齐的发生，一定是基于某个参照物的，比如我们把上例中的 vertical-align 属性值设置为 5px，可以猜到，3 个 span 元素一定向上移动了 5px，但是这个移动的初始位置在哪里呢？
例子：
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; } 向上
5px 向上
5px 向上
5px
行盒子的基线这个初始位置就是基线( baseline )。
基线是垂直对齐的基础，vertical-align 的默认值便是基线对齐。
根据规范，字母 x 的下边线即为基线。汉字或部分英文字母的下边线要低于字母 x 的下边线，但仍然以字母 x 的下边线为标准。
内联元素的垂直对齐都是发生在行盒子当中，因此找到行盒子的基线显得尤为重要。
在这里，又需要提及透明文本节点(1)。这个文本其实可以当作字母 x 去理解，因此，行盒子里面的所有内联元素，都是基于这个透明 x 节点进行垂直对齐的。
*(1)透明文本节点的内容，可以参考：内联元素的两大基石之 line-height
例子1：默认情况下，内联元素都是基线对齐
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; } 基线
x对齐 基线
x对齐 基线
x对齐
例子2：span 元素基线向上移动 20px
内联元素的基线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; } 基线
x对齐 基线
x对齐 基线
x对齐
首先，对于标准内联元素( 无论是否有内容 )和匿名内联元素( 文字 )，都是完全遵守基线定义的，即以字母 x 下边线作为基线。
例子：
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; } x基线x对齐
其次，由于历史原因，很多有着内联盒子特点，但又不完全遵循内联盒子规则的元素都统一规划到替换元素之中。同样，替换元素在基线的处理上，和标准内联元素也是大相径庭。
以 img 为代表的替换元素，其基线是 margin 的下边线；类似的还有 iframe、canvas、video、textarea 等。
例子：
p { background-color: #eee; line-height: 120px; text-align: center; } img { background-color: seagreen; width: 100px; border: 5px #795548 solid; padding: 5px; margin: 5px; } x
以 input 为代表的替换元素，其基线是元素里面文字的基线( 字母 x 下边线 )，类似的还有 select 等。
例子：
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; } x
*现有的规范中，并没有替换元素基线的详细说明，因此在使用这些元素时，会因浏览器不同而表现出差异性，需要多加注意。
最后，对于内联级元素( inline-block 的元素 )，如果元素里面没有内联元素，则该元素的基线就是其 margin 的下边线；如果元素里面有内联元素，则该元素的基线就是元素里面最后一行内联元素的基线：
例子：
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; } x x
如有错误，欢迎指正，本人不胜感激。
