CSS 为什么容器 div 坚持比 IMG 或 SVG 内容略大？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11126685/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why does container div insist on being slightly larger than IMG or SVG content?
提问by Chris
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.
我正在尝试制作另一个灯箱，因为它非常需要 HTML/CSS/Javascript 实践，但我遇到了一个看起来微不足道的样式问题（可能是！）但我无法解决它。
I have a divthat contains an img. No matter what I try (border, margin, padding, auto height etc.) I just can't make the divshrink to match the image dimensions. I've reduced the problem to this:
我有一个div包含img. 无论我尝试什么（border、margin、padding、 自动高度等），我都无法div缩小以匹配图像尺寸。我已将问题简化为：
<!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.
'picture.jpg' 是 640x400，但容器 div 想要是 640x404，差异显示为图像下方的黑色条带。div 存在，以便我可以通过将其不透明度混合到 0，交换它，然后将其重新混合来将图像淡化为黑色。
I've looked at the computed styles in multiple browsers and can't see where the 4px delta is coming from.
我在多个浏览器中查看了计算样式，但看不到 4px delta 的来源。
回答by sbeliv01
Trying adding:
尝试添加：
img { display: block; }
to your CSS. Since an <img>is an inline element by default, its height is calculated differently as related to the default line-height value.
到您的 CSS。由于<img>默认情况下an是内联元素，因此其高度的计算方式与默认 line-height 值有关。
On inline elements, the line-height CSS property specifies the height that is used in the calculation of the line box height.
在行内元素上，line-height CSS 属性指定用于计算行框高度的高度。
On block level elements, line-height specifies the minimal height of line boxes within the element.
在块级元素上， line-height 指定元素内行框的最小高度。
回答by Joseph Silber
Your image is using the line-height of its parent. Try this:
您的图像正在使用其父级的行高。尝试这个：
.imagebg { line-height: 0 }
回答by MindInvader
try adding:
尝试添加：
vertical-align: middle;
This is used in google material design lite for removing the gap between audio, canvas, iframes, images, videos and the bottom of their containers.
这在 google material design lite 中用于消除音频、画布、iframe、图像、视频及其容器底部之间的间隙。
Material Design Lite: https://getmdl.io
材料设计精简版：https: //getmdl.io
Github discusion: https://github.com/h5bp/html5-boilerplate/issues/440
Github 讨论：https: //github.com/h5bp/html5-boilerplate/issues/440
回答by Subhajit
Basically you are getting this error on IE, though you hve not mentioned but this is the fact. IE generates some extra space below the <img>tag. Hence its a good practice to make the images img { display: block; }.
基本上你在 IE 上收到这个错误，虽然你没有提到但这是事实。IE 在<img>标签下方生成一些额外的空间。因此，制作图像是一个很好的做法img { display: block; }。
EDIT: You can say its a bug of IE
编辑：您可以说它是 IE 的错误
回答by Denis Seletkov
If you don't want to change displayof the element, try
如果您不想更改display元素，请尝试
margin-bottom: -4px;
