DIV元素中图像后的额外空间

Question

我有一个简单的HTML文档，它包含一个div和一个img元素。 img元素后有一个额外的空格。

小部件位于下方。

我在Chrome和Firefox中尝试过它。

如何删除图像元素后的额外空间？我想让div元素高度与图像相同。

感谢。

<div style="background-color:green">
    <img src="https://cdn.cvmer.com/rapor/bg/E5402F.png" />
</div>

Answer 1

您只需添加此CSS

即可

img {
  display: block;
}
<div style="background-color:green">
    <img src="https://cdn.cvmer.com/rapor/bg/E5402F.png" />
</div>

Answer 2

将img设为块元素。

＆＃13;

＆＃13;

img {
  display: block;
}

＆＃13;

<div style="background-color:green">
  <img src="https://cdn.cvmer.com/rapor/bg/E5402F.png" />
</div>

＆＃13;

＆＃13;

＆＃13;