我似乎无法弄清楚为什么当它包含两个图像时,为什么这个额外的 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>
少/CSS:
#social {
background-color: red;
}
结果: