Question

有人可以解释一下，为什么这个小黄色填充低于的图像？我知道图像右侧的黄色空间是正常的，但为什么在下面呢？知道如何解决这个问题吗？

谢谢！

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}

}

Answer 1

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

在图片上设置float: left
在图片上设置display: block
在.info div

line-height: 0

Answer 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}

}

CSS3：图像底部的奇怪填充

2 个答案: