图片底部出现空白间隙原因及解决方案

我们在给盒子里放图片时，图片总是离盒子底部还有一段白色间隙，这让强迫症表示很不舒服

以下我们来说说产生原因以及解决方案吧

 

因为行内块元素（这里的图片）默认是与文字基线对齐的，看到那个字母p与其他字母区别了吧 ，

p下面的线是底线，而与大多数字母对齐的是基线，所以图片产生一条空白缝隙

解决方案：

设置图片与文字的对齐方式为其他方式（top/middle/bottom）

因为行内块与行内元素才会与文字对齐方式默认是基线对齐，将图片改为块元素即可

.box img {

/* vertical-align: top;

vertical-align: middle;

vertical-align: bottom; */

/* 方案一 */

display: block;

/* 方案二 */

}