我们在给盒子里放图片时，图片总是离盒子底部还有一段白色间隙，这让强迫症表示很不舒服
以下我们来说说产生原因以及解决方案吧
因为行内块元素（这里的图片）默认是与文字基线对齐的，看到那个字母p与其他字母区别了吧 ，
p下面的线是底线，而与大多数字母对齐的是基线，所以图片产生一条空白缝隙
解决方案：
- 设置图片与文字的对齐方式为其他方式（top/middle/bottom）
- 因为行内块与行内元素才会与文字对齐方式默认是基线对齐，将图片改为块元素即可
<style>
* {
padding: 0;
margin: 0;
}
.box {
border: 2px solid red;
}
.box img {
/* vertical-align: top;
vertical-align: middle;
vertical-align: bottom; */
/* 方案一 */
display: block;
/* 方案二 */
}
</style>
</head>
<body>
<div class="box">
<img src="img/mi.png" alt="">
</div>
</body>
来看看结果吧！！！
可以收藏，以备后用哦
原创文章 24
获赞 13
访问量 1353