Question

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

我的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'是640x400，但容器div想要是640x404，差异显示为图像下方的黑色条带。 div存在，以便我可以通过将图像的不透明度混合到0来淡化图像，交换它，然后将其重新混合。

我查看了多个浏览器中的计算样式，无法看到4px delta的来源。

Answer 1

尝试添加：

img { display: block; }

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

在内联元素上，行高CSS属性指定在计算行框高度时使用的高度。

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

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

Answer 2

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

.imagebg { line-height: 0 }

Answer 3

尝试添加：

vertical-align: middle;

这在google material design lite中用于消除音频，画布，iframe，图像，视频和容器底部之间的差距。

Material Design Lite：https://getmdl.io

Github发言：https://github.com/h5bp/html5-boilerplate/issues/440

Answer 4

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

.imagebg { display: flex }

Answer 5

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

编辑：您可以说它是IE的错误

Answer 6

如果您不想更改元素的display，请尝试

margin-bottom: -4px;

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

6 个答案: