一、前言

今天在布局中，文字后面加个图片发现图片与父元素之间存在了一个小间隙，实在不解，然后上网查了下，原来是基线对齐引起的，深入了解后发现了其中的一点小猫腻，所以本文结合vertical-align属性，集文字、图片、input、button查看元素同行的对齐方式，做一次记录。

二、元素对齐方式

1、基线

基线在文字领域中，是一种对齐的基准，简而言之就是小时候写单词的四线三格本中，倒数第二条线，也就是下图中英文子母a的底部。

四线三格中倒数第二条

2、对齐方式

行内（块状-行内）元素对齐方式默认以基线对齐，即：同行子元素的对齐方式默认是根据父元素的基线位置对齐。

可能有同学就疑问了，文字基线好找，但是块状元素它不是文字，它的基线又在哪里呢？

然而这个并不是难题，因为既然子元素的基线与父元素基线是对齐的（表现为两条基线重合），这不就可以根据子元素的基线位置来判断父元素基线位置了吗。

所以寻找父元素的基线位置，我们可以根据父元素中x字符的基线位置确定（也就是x字符的底部）。子元素文字基线也就是父元素的基线：

基线位置

既然知道了父元素的基线位置，然后查看各种元素在父元素内的对齐情况：

各种元素在父元素内对齐情况
读图可知：x的基线与图片的最下方、input框内文字基线、button文字基线对齐。所以从中可以得出结论：图片的基线是其正下方；input和button的基线是其内部文字的基线。

看到这里似乎还没发觉异样，但是如果现在你再给父元素增加border边界：

父元素设置border-bottom属性
你会发现，文字和图片就下面与边界有一段距离！这是因为父元素撑开扩展是自基线向两侧上下扩展开来，input和border的基线是根据内部文字确定，从基线开始外框向上下两边扩展开来，所以父元素下方会被撑开，导致文字与图片就会和实际父元素的下边界有一段距离！

有的小伙伴就想如果去除input和button，下面的间隙就会去掉了吗？

去掉input和button
答案是：并没有，因为英文中有向 j 这样的文字，基线在 x 的下方，不在文字 j 的最下方，然而图片的基线在图片的最下方，所以空隙还是依旧存在的。所以要去掉空隙要把文字jp也都去掉，这显然在实际情况，为了去掉空隙，删除向下撑开的内容肯定不行。

三、vertical-align的使用

既然了解了基线对齐方式，必不可少的要讲到vertical-align了。vertical-align的默认属性值是baseline，表示基线对齐，其还有其他常用属性值：

baseline:元素的基线与父元素的基线对齐；
top:元素的顶部与父元素的顶部对齐；
bottom:元素的底部与父元素的底部对齐；
milddle:元素的中间与父元素的中间对齐；
text-top:元素的文字顶部与父元素的文字顶部对齐；
text-bottom:元素的文字底部与父元素的文字底部对齐；

是子元素与父元素相同部分的对齐！

因此，设置原有图片的vertical-align为bottom，发现空隙消失了！

图片设置bottom

这是因为让图片的bottom与父元素的bottom重合！。因为图片的bottom与baseline本身是重合的，然而父元素的baseline和bottom不同。所以这是解决图片距离父元素底部空隙的最好方式。

当然此处也写上其他图片距离父元素底部空隙的解决方式：
a、图片设置display: block;
b、图片的父级身上设置font-size: 0;（我的理解是：文字尺寸设置为0，四线格变成一条线，基线和bottom全部重合了，所以空隙也会消失）

尾言

小小的baseline总是不经意的产生影响，然而在使用的使用丝毫没有想过，不但图片的空隙，有时候也会发现icon和文字的不对齐情况都是因为基线对齐引起的，所以有icon对齐的时候会设置vertical-align:-20%使得对齐。因此小小细节希望同学们，也很多注意。