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

This question already has answers here:

Image inside div has extra space below the image
                                
                                    （9个答案）
                                
                        
                                7个月前关闭。
            
                    
我在容器内有图像。图像的高度为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

最佳答案

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

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