Question

我在容器中有一张图片。图像的高度为2px，容器的高度没有定义。由于某种原因，容器的高度为18px。如果我将图像18px设为高，则div取22px，如果图像为20px，则div为24px。我尝试使用display：block，inline和inline-block。一样。然后我尝试了display：flex并成功了。另外，我认为如果只删除div，那么图片的高度将为2px。所以，我的问题是，为什么div处于这种高度？

<div>
  <img class="colorbar__img" src="https://i.ibb.co/ZgQjMDd/colorstripe.png" alt="Color bar" />
  </div

以下是带有示例的codepen：https://codepen.io/in43sh/pen/mZMBOp

Answer 1

我尝试应用img { display:block }，并为我解决了问题（Chrome，Mac）。

之所以会有额外的高度，是因为浏览器正在将标记中的空白呈现为文本，并将font-size和line-height应用于div的内容。您可以尝试从标记中删除所有空白，或将字体大小设置为零.one { font-size:0; line-height:0; }

Answer 2

这是因为默认情况下，img标签是inline-elements和line-height。您可以通过为img标签添加css来将其更改为block元素来解决此问题：

img {
 display: block;
}

Answer 3

img {
  display: block;
}

body,
html {
  margin: 0;
}

<div class="one">
  <img class="colorbar__img" src="https://i.ibb.co/ZgQjMDd/colorstripe.png" alt="Color bar" />
</div>

带有图像的容器的高度奇怪

3 个答案: