了解vertical-align

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.

简单说来，vertical-align主要作用在行内元素盒子和表格单元盒子上。

因为经常会遇到行内元素与图片元素混排的情况，故拿这种情况进行举例，并加以说明，增进理解。

举个栗子

例如有如下HTML代码：

<style>
p {
  margin: 0;
  font-size: 16px;
  line-height: 16px;
}
p img {
  height: 36px;
}
</style>
<p>
  Hello Kitty, this is Jin, look,
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1398347788,1784750184&fm=27&gp=0.jpg" alt="">
  is my avatar.
</p>

执行以上代码将得到下面的结果：

image.png

分析结果，我们大致可以得到以下两个问题：

p标签的高度并不是被img撑开的高度36px，而是39px
img的底部并没有置于行块的底部

这里需要插入一个概念——基线（baseline），基线基线，顾名思义就是一条基础的水平线，正如纸质笔记本每一页上的一条条横线，它是作为一条参考线，用来保证文字在水平方向上能够整齐排列。

对于英文字母来说，基线存在于abcdefghijklmnopqrstuvwxyz中除gjpqy以外的其他字母的最底部。下图中红色的线则为基线。

image.png

vertical-align的默认值为baseline，并且由于大部分英文字母底部都达不到gjpqy拖长部分的位置，故而会产生3个像素的留白（这个依赖于不同用户代理，即浏览器的渲染机制）。

经过以上分析，便解释了之前的两个问题。

vertical-align

现在的代码将对vertical-align的几个属性值进行枚举展示：

/* Keyword values */
vertical-align: baseline; // 基线对其
vertical-align: sub;
vertical-align: super;
vertical-align: text-top; // 文字顶部
vertical-align: text-bottom; // 文字底部
vertical-align: middle; // 文字中部（垂直方向）
vertical-align: top; // 包含块顶部
vertical-align: bottom; // 包含块底部

/* <length> values */
vertical-align: 10em;
vertical-align: 4px;

/* <percentage> values */
vertical-align: 20%; // 距离包含块顶部的百分比距离，仅在父元素设置有line-height时才会生效

/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

上边的代码中，带text-前缀和不带text-前缀的区别就是，一个是基于文字对齐，一个是基于包含块（即最近父元素）对齐。

假如p标签仅仅只包含了文字，那么，它的高度则是line-height的高度，此时若在p中插入一个img元素，设置text-和不设置，就能够得到明显的区别，如下图所示，蓝色区块的高度则是取决于设置的line-height: 5px。