深入理解css中vertical-align属性

一、为什么要写这篇文章

今天看到一个问题：

两个div 都设置 display：inline-block，正常显示；但是在第二个div中加一个块级元素或者内联元素，显示就变了个样，为什么？

解决方案就是给第二个div加上：vertical-align:top。

关于vertical-align和基线我知道一点，但是这个问题我没能答出，所以学习总结分享一下。

二、vertical-align干什么的？

w3c有一段相关信息如下：

可以看到vertical-align影响inline-level元素和table-cell元素垂直方向上的布局。根据MDN描述，vertical-align对::first-letter和::first-line同样适用。

适用于：

inline水平的元素  

inline:<img>,<span>,<strong>,<em>,未知元素  

inline-block:<input>(IE8+),<button><IE8+>....

'table-cell'元素

table-cell:<td>

所以默认情况下，图片，按钮，文字和单元格都可以用vertical-align属性。

取值：

三、baseline

1、字母‘x’与baseline

 字母x的下边缘（线）就是基线。不是字母s之类下面有尾巴的字母

基线甚至衍生出了：  

1.“alphabetic” baseline: “字母”基线 – 英文  

2.“hanging” baseline: “悬挂”基线 – 印度文  

3.“ideographic” baseline: “表意”基线 – 中文

2、baseline的确定规则

1、inline-table元素的baseline是它的table第一行的baseline。