html - 带有图像的容器具有奇怪的高度

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

这是带有示例的代码笔：https ://codepen.io/in43sh/pen/mZMBOp

标签： htmlcss

Answer 1

我尝试申请img { display:block }并为我修复了它（Chrome，Mac）。

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