gpt4 book ai didi

html - 当并排包含两个图像时,div 高度莫名其妙地高了 5px

转载 作者:搜寻专家 更新时间:2023-10-31 22:47:39 25 4
gpt4 key购买 nike

当我的 div 包含两个图像时,我似乎无法弄清楚为什么这个额外的 5px 会出现在它的底部。当它只包含一个图像时不会发生。我已经删除了所有其他标记和 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;
}

结果:

Image of the error in Chrome

最佳答案

尝试添加:

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

#social { line-height: 0; }

到您的 CSS。自<img>默认情况下是行内元素,它的高度计算方式与默认行高值不同。

这是一个 fiddle :http://jsfiddle.net/5Gs3Q/

在内联元素上,line-height CSS 属性指定用于计算行框高度的高度。

在 block 级元素上,line-height 指定元素内行框的最小高度。

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

关于html - 当并排包含两个图像时,div 高度莫名其妙地高了 5px,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13807247/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com