CSS3：图像底部有奇怪的填充 [英] CSS3: Strange padding on bottom of an image
本文介绍了CSS3：图像底部有奇怪的填充的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
可以有人请解释一下为什么这个小黄色填充下面的图像？我知道图像右侧的黄色空间是正常的，但为什么？任何想法如何解决这个问题？
can somebody please explain me why there is this small yellow padding below the image? I know that the yellow space on the right of the image is normal but why below? Any idea how to fix this?
谢谢！
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是一个内联元素，线高度。要避免图片下方的空格，您可以执行以下操作之一：
The img is an inline element, so it takes the line-height into consideration. To avoid the space below the image you can do one of the following things:
- 设置
float：left图片上 - 在图片上设置
display：block在.info div上设置line-height：0
- set
float: lefton the image - set
display: blockon the image - set
line-height: 0on the .info div
这篇关于CSS3：图像底部有奇怪的填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
