为什么css图片之间有间隙？怎么解决？

太久没用的东西，偶然用到，竟然忘记了，所以记录一下，加深一下印象

为什么图片底部会有空白缝隙?

图片和行内块元素默认底线会和父级盒子的基线对齐，因此就会产生白色缝隙。

什么是基线

image.png

如何去除图片底部间隙?

1.用vertical-align:middle | top| bottom等，让图片不和基线对齐。

vertical-align:middle;

vertical-align: top;

vertical-align: bottom; 

上面3中对齐方式都可以
vertical-align不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。

2.将img通过display: block;转为块级元素。
转为块级元素之后，就不存在和父级盒子基线对齐的问题了。