Question

我似乎无法弄清楚为什么这个额外的5px在我的div的底部显示它包含两个图像。当它只包含一个图像时不会发生。我删除了所有其他标记和CSS，问题仍然存在。它也发生在Chrome，Firefox和IE上。

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <link rel="stylesheet/less" href="<?php echo THEMES_URI; ?>starter_digital/style.less" type="text/css">
    <script src="<?php echo THEMES_URI; ?>starter_digital/javascript/less-1.3.1.min.js" type="text/javascript"></script>
</head>

<body>
    <div id="social">
        <img src="<?php echo THEMES_URI; ?>starter_digital/images/facebook.png" />
    </div>

    <br />

    <div id="social">
        <img src="<?php echo THEMES_URI; ?>starter_digital/images/twitter.png" />
    </div>

    <br />

    <div id="social">
        <img src="<?php echo THEMES_URI; ?>starter_digital/images/facebook.png" />
        <img src="<?php echo THEMES_URI; ?>starter_digital/images/twitter.png" />
    </div>
</body>
</html>

Less / Css：

#social {
  background-color: red;
}

结果：

Image of the error in Chrome

Answer 1

尝试添加：

#social img { display: block; float: left; margin-right: 5px; }

或

#social { line-height: 0; }

到你的CSS。由于<img>默认为内联元素，因此它的高度计算方式与默认的行高值相关。

这是一个小提琴：http://jsfiddle.net/5Gs3Q/

在内联元素上，行高CSS属性指定在计算行框高度时使用的高度。

在块级元素上，line-height指定元素中行框的最小高度。

来源：https://developer.mozilla.org/en/CSS/line-height

Answer 2

我认为改变行高可能会解决问题。

#social {
   background-color: red;
   line-height:normal;
}

当并排包含两个图像时，Div高度莫名其妙地高出5px

2 个答案: