CSS3：图像底部的奇怪填充答案

【问题标题】：CSS3: Strange padding on bottom of an imageCSS3：图像底部的奇怪填充
【发布时间】：2015-08-20 22:32:42
【问题描述】：

谁能解释一下为什么在图像下方有这个黄色的小填充？我知道图片右边的黄色空间是正常的，但为什么在下面？知道如何解决这个问题吗？

谢谢！

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}

}

【问题讨论】：

不是填充。它是为descenders 提供空间的浏览器。这是我解释其工作原理的答案：Mystery white space underneath image tag

标签： css

【解决方案1】：

img 是一个内联元素，所以它考虑了行高。要避免图像下方的空间，您可以执行以下操作之一：

在图片上设置float: left
在图片上设置display: block
在 .info div 上设置 line-height: 0

【讨论】：

【解决方案2】：

它是一个空格，就像换行符一样。您可以为其设置另一个 css 标签。当持有者有图像时将行高设置为零。

<body>
<div id="page">
<div class="box">
    <div class="info image-holder" 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}
.info.image-holder {
    line-height: 0;
}

@media screen and (min-width:480px) {

  .box {width:100%;float:left}
  .info {width:50%;float:left}

}

【讨论】：