解决img和div高度不同的问题（转）
原文：https://blog.csdn.net/qq_34466755/article/details/111411986
1、问题
- img在div中会在底部产生额外的空隙
copy<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、将图片设为块级元素
copyimg {
display: block;
}
- 缺点：img无法作为行内元素显示
2.2、将div字体大小设置为0
copydiv{
font-size:0;
}
- 缺点:div内部无法显示文字
2.3.将图片的对齐方式设为bottom（推荐）
copyimg{
vertical-align:bottom;
}
- 当div中有其他行内元素时仍然可以正常显示
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通