Por que o div contêiner insiste em ser um pouco maior que o conteúdo de IMG ou SVG?

Question

Jun 20, 2012, 09:22 PM

Por que o div contêiner insiste em ser um pouco maior que o conteúdo de IMG ou SVG?

Eu estou tentando produzir mais uma lightbox tanto quanto necessário HTML / CSS / Javascript prática, mas eu encontrei um problema de estilo que parece trivial (e provavelmente é!), Mas eu simplesmente não consigo resolvê-lo.

eu tenho umdiv que contém umimg. Não importa o que eu tente (border, margin, padding, altura automática, etc.) Eu simplesmente não consigodiv encolher para coincidir com as dimensões da imagem. Eu reduzi o problema para isso:

<!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, mas o div contêiner quer ser 640x404, a diferença se mostra como uma faixa preta abaixo da imagem. A div existe para que eu possa diminuir a imagem para preto, misturando sua opacidade em 0, troque-a e misture-a novamente.

Eu olhei para os estilos computados em vários navegadores e não consigo ver de onde vem o delta 4px.