为什么容器div坚持比IMG或SVG内容稍大？ [英] Why does container div insist on being slightly larger than IMG or SVG content?
问题描述
我有一个包含 img 的 div 无论我尝试什么（ border ， margin ， padding ，自动高度等）我只是不能让 div 收缩以匹配图像尺寸。我已经把问题减少到这：
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 / / ENhttp://www.w3.org/TR/html4/strict.dtd\">
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8>
< title>布局实验< / title>
< style type =text / css>
#lightbox {
margin：0;
padding：0;
position：fixed;
left：50％;
margin-left：-320px;
top：100px;
border-radius：22px;
background：＃e0e0f0;
color：＃102020;
}
#lightbox img {
border-radius：15px;
}
.imagebg {
margin：7px;
background：black;
border-radius：15px;
height：100％;
}
< / style>
< / head>
< body>
< div id =lightbox>
< div class =imagebg>
< img src =picture.jpg>
< / div>
< / div>
< / body>
< / html>
'picture.jpg'是640x400，但容器div想要为640x404，作为图像下方的黑条。 div存在，所以我可以通过将它的不透明度降低到0来将图像淡化为黑色，交换它，然后将它混合回来。
我看过
尝试添加
：在多个浏览器中计算样式，并且无法看到4px增量来自哪里。 img {display：block; }
由于默认情况下< img> 是一个内联元素，因此它的高度与默认行高值的计算方式不同。
在行内元素中，line-height CSS属性指定在计算行框高度时使用的高度。
在块级元素上，line-height指定元素中行框的最小高度。
源：https://developer.mozilla.org/en/CSS/line-height
I'm trying to produce yet another lightbox as much needed HTML/CSS/Javascript practice, but I've encountered a styling issue that looks trivial (and probably is!) but I just can't solve it.
I have a div that contains an img. No matter what I try (border, margin, padding, auto height etc.) I just can't make the div shrink to match the image dimensions. I've reduced the problem to this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Layout experiments</title>
<style type="text/css">
#lightbox {
margin: 0;
padding: 0;
position : fixed;
left : 50%;
margin-left : -320px;
top : 100px;
border-radius: 22px;
background : #e0e0f0;
color : #102020;
}
#lightbox img {
border-radius: 15px;
}
.imagebg {
margin : 7px;
background : black;
border-radius: 15px;
height : 100%;
}
</style>
</head>
<body>
<div id="lightbox">
<div class="imagebg">
<img src="picture.jpg">
</div>
</div>
</body>
</html>
'picture.jpg' is 640x400, but the container div wants to be 640x404, the difference showing itself as a black strip below the image. The div exists so that I can fade the image to black by blending it's opacity down to 0, swap it, then blend it back in.
I've looked at the computed styles in multiple browsers and can't see where the 4px delta is coming from.
Trying adding:
img { display: block; }
to your CSS. Since an <img> is an inline element by default, it's height is calculated differently as related to the default line-height value.
On inline elements, the line-height CSS property specifies the height that is used in the calculation of the line box height.
On block level elements, line-height specifies the minimal height of line boxes within the element.
Source: https://developer.mozilla.org/en/CSS/line-height
这篇关于为什么容器div坚持比IMG或SVG内容稍大？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
