有人可以解释一下为什么图像下方 有这个黄色的小填充吗？我知道图像右侧的黄色空间是正常的，但为什么在下方？知道如何解决这个问题吗？
谢谢!
HTML:
<body>
<div id="page">
<div class="box">
<div class="info" style="background:yellow">
<img src="https://placehold.it/350x150" style="max-width:100%;height:auto">
</div>
<div class="info">Text</div>
</div>
<footer>Footer</footer>
</div>
</body>
CSS:
body{margin:0;font-size:100%}
#page{margin: 0 auto}
footer{background:black;color:white}
.box {background:white}
.info {background:orange}
@media screen and (min-width:480px) {
.box {width:100%;float:left}
.info {width:50%;float:left}
}
最佳答案
img 是一个行内元素，所以它考虑了行高。要避免图像下方的空间，您可以执行以下操作之一:
- 在图片上设置
float: left - 在图片上设置
display: block - 在 .info div 上设置
line-height: 0
关于CSS3 : Strange padding on bottom of an image，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32129524/