Div 没有使用 img 内容获得正确的高度

Question

我有一个带有单个 div 的简单页面。在那个 div 里面我有一个尺寸为 [h:58px, w:173px] 的图像。

<body>
    <div id="main_header">
        <img src="logo.gif" style="padding: 0; margin: 0;">
    </div>
</body>

它不包含在任何其他标签中。但是，Chrome 将容器 div 的高度计算为 63px。 #main_header 没有关联的 css。 html 和 body 的 margin 和 padding 都设置为 0。

谁能解释为什么 div 的高度是 63 而不是 58？

Answer 1

这是因为父母的line-height。要么将父级的line-height（或font-size）设置为零，要么将图像设置为display: block。