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

Question

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

我正在尝试生产另外一个需要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>

Run Code Online (Sandbox Code Playgroud)

'picture.jpg'是640x400,但容器div想要是640x404,差异显示为图像下方的黑色条带.div存在,以便我可以通过将图像的不透明度混合到0来淡化图像,交换它,然后将其重新混合.

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

Answer 1

sbe*_*v01 133

尝试添加:

img { display: block; }

Run Code Online (Sandbox Code Playgroud)

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

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

在块级元素上,line-height指定元素中线框的最小高度.

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

@Chris - 这就是我给你的原因:`img`有一个隐含的`line-height`赋予它,它给它一些垂直的呼吸空间.由于`line-height`仅适用于`inline`元素,因此将`img`设置为`display:block`会删除`line-height`. (4认同)
这也适用于“内联块”。感谢您的解释。 (2认同)