我们在给盒子里放图片时,图片总是离盒子底部还有一段白色间隙,这让强迫症表示很不舒服
以下我们来说说产生原因以及解决方案吧
因为行内块元素(这里的图片)默认是与文字基线对齐的,看到那个字母p与其他字母区别了吧 ,
p下面的线是底线,而与大多数字母对齐的是基线,所以图片产生一条空白缝隙
解决方案:
设置图片与文字的对齐方式为其他方式(top/middle/bottom)
因为行内块与行内元素才会与文字对齐方式默认是基线对齐,将图片改为块元素即可
.box img {
/* vertical-align: top;
vertical-align: middle;
vertical-align: bottom; */
/* 方案一 */
display: block;
/* 方案二 */
}