gpt4 book ai didi

CSS3 : Strange padding on bottom of an image

转载 作者:太空宇宙 更新时间:2023-11-03 23:12:21 24 4
gpt4 key购买 nike

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

谢谢!

http://jsfiddle.net/uu0dggmr/

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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com