解决img标签的间隙： 幽灵空白节点

一 - 解决img标签的间隙： 幽灵空白节点

1.1 - 引入：

1. 因为 img 标签的基线就是图片的底部，那么一行文字包括当前行内的图片都是基于基线对齐的。
2. 但是图片的基线和底线是重合的，所以图片下边是由空隙留给文字的底线和基线之间的距离
3. 但是为什么明明没有书写文字，仍然会有间隙呢？
   —其实浏览器在渲染过程中，会在空白的地方渲染一个没有宽度和高度的节点
   这个节点被称作为 幽灵空白节点
4. 所以简单概括为一句话就是：
   为什么会出现基线对齐呢，因为有默认的vertical-algin为baseline（基线）

1.2 - 总结的4种解决方案：

1、只有元素是行内元素或行内块元素，vertical-align这个属性才生效。所以我们想让vertical-align失效，那么就让img变成块级元素—设置display属性值为block

2、设置vertical-align的值不使用baseline，使用其他的比如 bottom top middle等等都可以

3、这个缝隙是文字的大小改变的，所有我们可以对文字设置font-size为0 前提是这个行框不能出现文字

4、我们改变文字的高度也是可以解决间隙的问题，将高度设置为0即可，但是文字的高度也可以由line-height决定,所以设置line-height为0也可以解决