baseline是一个容易让人忽略的东西，但是对它的忽略会造成一些奇怪的现象，就如同对z-index不熟悉一样。
最开始发现baseline存在是一个2列并排的元素里，对右边的元素用了font-size:16px;line-height:30px;height:30px;，然而元素内的文字在安卓机居中了，在苹果机却没有，而是和他左边的元素底部保持平齐。
baseline带来的问题，总是在使用line-height属性时被发现。
baseline 是vertical-align的默认值
- vertical-align 指定了行内（inline）元素或表格单元格（table-cell）元素的垂直对齐方式。
vertical-align指定的是垂直方向上的对其方式，他有参照，一般是父级元素，也会受兄弟元素影响。
取值有以下几种：
行内元素
-
baseline
元素基线与父元素的基线对齐。一些 可替换元素，比如
<textarea>， HTML标准没有说明它的基线，这意味着使用这个关键字，各浏览器表现可能不一样。 -
sub
元素基线与父元素的下标基线对齐。
-
super
元素基线与父元素的上标基线对齐。
-
text-top
元素顶端与父元素字体的顶端对齐。
-
text-bottom
元素底端与父元素字体的底端对齐。
-
middle
元素中线与父元素的基线对齐。
-
元素基线超过父元素的基线指定高度。可以取负值。 -
同 , 百分比相对于 line-height 。 下面两个属性不像上面的属性相对于父元素，而是相对于整行： - top
-
bottom
元素及其后代的底端与整行的底端对齐。 如果元素没有基线baseline，则以它的外边距的下边缘为基线。
table-cell元素
-
baseline (and sub, super, text-top, text-bottom,
, and ) 与同行单元格的基线对齐。
-
top
单元格的内边距的上边缘与行的顶端对齐。
-
middle
单元格垂直居中。
-
bottom
单元格的内边距的下边缘与行的底端对齐。 可以取负值。
不同浏览器对baseline解读不一样
我们常会纠结baseline表现的是span、input、img、button
处理方案
既然这么多浏览器对baseline理解不一致，规范没统一的东西还是不用为好，也没必要记住每个浏览器对每个支持baseline的元素的渲染方式。反正用到baseline的多是为了对齐，不如重置vertical-align:baseline，使用vertical-align:bottom，有不对齐的，用padding补救。
漠大的知乎回答
结合 CSS 2.1 规范中行内格式化上下文、行高计算、差异半差异、’line-height’ 和 ‘vertical-align’ 特性中相关说明，可以总结出行框顶边与行框底边位置的计算方式：
-
每一个行内元素会产生一个行内框；
-
行内框会在行框内横向排列；
-
‘line-height’ 特性值指定了每个行内非替换元素生成的行内框的 确切 高度；行内替换元素的高度由 ‘height’ 特性值决定；
-
文字在行内框中垂直排列，上下空隙用半差异填补；如果字号大于行内框则文字从上下方向上溢出行内框，并可能渗入到其他行框内（行框是永远不会重叠的）；
-
‘vertical-align’ 特性值指定了每个行内框的垂直对齐方式；
-
行框的顶边界是这一系列垂直对齐的行内框最高的顶边框，底边界是最低的底边框。
-
行框的高度是顶边界到底边界的距离。
