造成额外填充的原因是什么？

Question

我有2个部分标签在彼此之上。第一个包含图像，第二个只包含一些文本。

但出于某种原因，第一个是在底部放置几个像素的额外填充。 为什么????

<section class="s1"><img src="something.jpg" width="500" height="500" /></section>
<section class="s2"> Test Test Test </section>

我在造型中尝试了这个

section, img {
    padding: 0;
    margin: 0
}
.s1 {
    background-color: black
}
.s2 {
    background-color: red
}

https://jsfiddle.net/ctscby6z/

忽略这是一个破碎的图像，对真实图像也一样。

感谢。

Answer 1

当显示类型不同时，会发生这种情况。

display: block;解决了这个问题。

Answer 2

img是内嵌元素。所以为它做display: block。

Answer 3

您应该将display: block;添加到图片：https://jsfiddle.net/Mindaugas/jk4yyw48/1/

Answer 4

默认情况下，

<img>标记显示为inline block elements，但在这样的实例中，您可能希望使用display:block;代替：

img { display: block }

示例

img {
  display: block;
}
section,
img {
  padding: 0;
  margin: 0
}
.s1 {
  background-color: black
}
.s2 {
  background-color: red
}

<section class="s1">
  <img src="something.jpg" width="500" height="500" />
</section>
<section class="s2">Test Test Test</section>