<分区>
<分区>
我在容器中有一个图像。图片的高度为 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
最佳答案
我尝试应用 img { display:block } 并为我修复了它(Chrome、Mac)。
额外的高度在那里是因为浏览器将标记中的空白呈现为文本，将字体大小和行高应用于 div 的内容。您可以尝试从标记中删除所有空格，或将字体大小设置为零 .one { font-size:0;行高:0； }
关于html - 带有图像的容器具有奇怪的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56759558/