为什么容器 div 坚持比 IMG 或 SVG 内容略大？答案

【问题标题】：Why does container div insist on being slightly larger than IMG or SVG content?为什么容器 div 坚持比 IMG 或 SVG 内容略大？
【发布时间】：2012-06-20 19:22:11
【问题描述】：

我正在尝试根据 HTML/CSS/Javascript 实践的需要制作另一个灯箱，但我遇到了一个看起来微不足道的样式问题（而且可能是！）但我就是无法解决。

我有一个包含img 的div。无论我尝试什么（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' 是 640x400，但容器 div 想要是 640x404，差异显示为图像下方的黑色条带。 div 存在，因此我可以通过将图像的不透明度混合为 0 来将图像淡化为黑色，交换它，然后将其重新混合。

我查看了多个浏览器中的计算样式，但看不到 4px 增量来自哪里。

【问题讨论】：

标签： css

【解决方案1】：

尝试添加：

img { display: block; }

到您的 CSS。由于<img> 默认情况下是内联元素，因此其高度的计算方式与默认行高值相关。

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

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

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

【讨论】：

确实可以解决问题。你能详细说明为什么它会有所作为吗？（我不会坚持接受 - 所以在 11 分钟过去之前不会让我）
@Chris - 这就是我给你的原因：img 有一个隐含的line-height 分配给它，这给它一些垂直的呼吸空间。由于line-height 仅适用于inline 元素，将img 设置为display: block 会删除line-height。
@Joseph - 当我提出上述请求时，我没有看到您的回复。由于他们基本上直接或间接地实现了完全相同的目标，因此在答案之间没有太多选择。接受首先到达的答案似乎是公平的，但感谢您的解释。
这也适用于inline-block。谢谢你的解释。

【解决方案2】：

您的图片正在使用其父级的行高。试试这个：

.imagebg { line-height: 0 }

【讨论】：

【解决方案3】：

尝试添加：

vertical-align: middle;

这在 google material design lite 中用于消除音频、画布、iframe、图像、视频及其容器底部之间的间隙。

Material Design Lite：https://getmdl.io

Github 讨论：https://github.com/h5bp/html5-boilerplate/issues/440

【讨论】：

接受的解决方案改变了显示，这在我的情况下是不可取的。这对我有用，没有任何缺点。

【解决方案4】：

除了其他有效的答案之外，将父级的 display 属性设置为 flex 也对我有用：

.imagebg { display: flex }

【讨论】：

【解决方案5】：

基本上你在 IE 上遇到了这个错误，虽然你没有提到，但这就是事实。 IE 在<img> 标记下方生成一些额外的空间。因此，制作图像img { display: block; } 是一个很好的做法。

编辑：你可以说它是 IE 的一个错误

【讨论】：

我没有提到 IE，因为我没有使用它。 Safari、Chrome 和 Firefox 都表现出相同的行为。 Joseph 和 sbeliv01 的答案都有效。
不是IE的bug。默认情况下，所有都按基线垂直对齐。 (vertical-align: baseline)，这意味着它们的最低点与字体的基线对齐（例如，字母“p”中圆圈的最低点）。要改变这一点，您只需要设置不同的对齐方式，例如，vertical-align: top;或垂直对齐：底部；。没有必要将变成块元素，因为它固有的内联属性可能很有用。

【解决方案6】：

如果你不想改变元素的display，试试

margin-bottom: -4px;

【讨论】：