原文：https://blog.csdn.net/qq_34466755/article/details/111411986
1、问题
- img在div中会在底部产生额外的空隙
<body>
<style>
div {
color: #fff;
background-color: blue;
}
img {
background-color: #fff;
}
</style>
<div class="content">
<img class="img" src="../../images/nature-1.jpg" width="200px" height="200px" alt="">
</div>
</body>
2、解决方案
2.1、将图片设为块级元素
img {
display: block;
}
- 缺点：img无法作为行内元素显示
2.2、将div字体大小设置为0
div{
font-size:0;
}
- 缺点:div内部无法显示文字
2.3.将图片的对齐方式设为bottom（推荐）
img{
vertical-align:bottom;
}
- 当div中有其他行内元素时仍然可以正常显示