浅谈img间隙问题及解决方案

浅谈img间隙问题及解决方案

为什么图片会有间隙呢？

这是因为图片默认和文本的基线对齐，img标签的基线就是图片的底部，那么一行文字包括当前行内的图片都是基于基线对齐的，但是图片的基线和底部是重合的，所以图片下边是由空隙留给文字的底线和基线之间的距离，但是为什么明明没有书写文字，仍然会有间隙呢？其实渲染过程中，会在空白的地方渲染一个没有宽度和高度的节点，这个节点被称作为幽灵白节点。

为什么会出现基线对齐呢？是因为有默认的vertical-align为baseline（基线）
解决方案：（常用的是1和5）

1. 只有元素是行内元素或行内块元素，vertical-align这个属性才生效，块元素没有vertical-align属性，让img变成块元素，设置display属性为block

2. .设置vertical-align的值不使用baseline，设置其他值都可以（top、middle、bottom）

3. 这个缝隙是基于文字的大小改变的，所以我们可以对文字设置font-size为0，前提是这个行框没有文字

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

5. 浮动，overflow：hidden。设置浮动后文字脱离文档流和父级没有关系了