css – 为什么容器div坚持比IMG或SVG内容稍大？

我试图产生另一个灯箱作为所需的HTML / CSS / Javascript实践，但我遇到了一个造型问题，看起来琐碎(可能是！)，但我只是不能解决它。

我有一个div，包含一个img。无论我尝试什么(边框，边距，填充，自动高度等)我只是不能使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’是640×400，但容器div想要为640×404，差异显示为图像下方的黑条。 div存在，因此我可以通过将它的不透明度降低到0来将图像淡化为黑色，交换它，然后将其混合回来。

我已经看过在多个浏览器中计算的样式，不能看到4px delta是从哪里来的。

解决方法

尝试添加：

img { display: block; }

到你的CSS。因为< img>是默认情况下的内联元素，其高度的计算方式与默认行高值相同。

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

对于块级元素，line-height指定元素中线框的最小高度。

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

css – 为什么容器div坚持比IMG或SVG内容稍大？

解决方法

猜你在找的CSS相关文章