问题: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>
解决方案:
1.将图片设为块级元素
img {display: block;}
缺点:img无法作为行内元素显示
- 将div字体大小设置为0
div{font-size:0;}
缺点:div内部无法显示文字
3.将图片的对齐方式设为bottom(推荐)
img{vertical-align:bottom;}
当div中有其他行内元素时仍然可以正常显示
<body>
<style>
div {
color: #fff;
background-color: blue;
}
img {
background-color: #fff;
vertical-align: bottom;
}
</style>
<div class="content">
<img class="img" src="../../images/nature-1.jpg" width="200px" height="200px" alt="">
<span>this is a text</span>
</div>
</body>