88

我正在尝试制作另一个灯箱作为非常需要的 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 增量来自何处。

4

6 回答 6

189

尝试添加：

img { display: block; }

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

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

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

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

于 2012-06-20T19:23:28.090 回答
26

您的图像使用其父级的行高。试试这个：

.imagebg { line-height: 0 }
于 2012-06-20T19:24:29.737 回答
13

尝试添加：

vertical-align: middle;

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

材料设计精简版：https ://getmdl.io

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

于 2017-03-30T12:23:14.977 回答
5

除了其他有效的答案外，将displayparent 的属性设置flex为也为我工作：

.imagebg { display: flex }
于 2020-05-31T16:12:39.757 回答
-1

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

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

于 2012-06-20T19:27:57.957 回答
-3

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

margin-bottom: -4px;
于 2016-10-03T06:59:38.637 回答