深入理解vertical-align和基线

最近css写的很多，经常会在div中放图片再配一些文字什么的，发现块元素内部有内联元素时，块元素的表现和内联元素的位置有一些奇奇怪怪的现象，看了张鑫旭老师的这篇https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/，收获很大。

现象一、div中放一张图片，图片下方出现空隙

<div style="background-color:red">
    <img src="./cbd066d4e1c4cf4c71cf9ef548e15af4.jpg">
</div>

为什么下面会有空隙呢？现在我们在图片后面加几个字再看看。

可以发现图片和文字是对齐的，他们有什么关系吗？我们再将文字变为inline-block，并加一个背景色。

到这里，我们大概明白了，图片下面的空隙和其后面的文字有关，但当我们不加文字的时候，图片的后面（或前面）放文字的这个节点依旧是存在的，张鑫旭老师将其称为幽灵空白节点。现在我们就好理解了。

1.这张图片的默认对齐方式是？

2.后面文字的高度从何而来？

vertical-align默认值是baseline, 也就是基线对齐。而基线是什么，基线就是字母X的下边缘。所以，图片的下边缘就和后面文字的下边缘对齐（见下图）。而字符本身是有高度的，于是，图片下面就留空了。而文字的高度是由行高决定的。

想要去掉这个空隙，该怎么做呢？

1. 让vertical-align失效

2. 使用其他vertical-align值

3. 直接修改line-height值

现象二、两个并排的设置为inline-block的元素，不对齐

<span class="dib-baseline"></span>
<span class="dib-baseline">x-baseline</span>
<style>
.dib-baseline {
    display: inline-block;
    width: 150px;
    height: 150px;
    border: 1px solid #cad5eb;
    background-color: #f0f3f9;
  }
</style>

同理，vertical-align默认这两个元素是以基线对齐的，一个inline-block元素，如果里面没有inline内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。解决方法就是，在第一个元素中加入空格。