当并排包含两个图像时,Div高度莫名其妙地高出5px
我似乎无法弄清楚为什么这个额外的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;
}
结果:
尝试添加:
#social img { display: block; float: left; margin-right: 5px; }
要么
#social { line-height: 0; }
到你的CSS.由于an <img>是默认的内联元素,因此它的高度计算方式与默认的行高值相关.
这是一个小提琴:http://jsfiddle.net/5Gs3Q/
在内联元素上,行高CSS属性指定在计算行框高度时使用的高度.
在块级元素上,line-height指定元素中线框的最小高度.
资料来源:https://developer.mozilla.org/en/CSS/line-height
- @Aloxis - 这不是你有两个图像的事实,它们之间的白色空间(换行符)会导致下面的额外像素.见http://jsfiddle.net/wP9tL/1/.完整的CSS解释有点复杂,但由于您使用的是XHTML Transitional doctype,因此在渲染空白区域之前,div的第一个行框的基线不会建立.然后图像位于基线上,并为基线下方的字符下降(在p,q,y等上)分配空间,这是额外的像素.XHTML Strict的工作方式不同.见http://jsfiddle.net/wP9tL/2/ (2认同)