Warum besteht Container Div darauf, etwas größer als IMG- oder SVG-Inhalte zu sein?

78

Ich versuche, einen weiteren Leuchtkasten zu erstellen, der die dringend benötigte HTML / CSS / Javascript-Praxis benötigt, aber ich bin auf ein Styling-Problem gestoßen, das trivial aussieht (und wahrscheinlich auch so ist!), Aber ich kann es einfach nicht lösen.

Ich habe eine div, die eine enthält img. Egal , was ich versuche , ( border, margin, padding, Auto Höhe etc.) Ich kann einfach nicht machen divschrumpft die Bildabmessungen entsprechen. Ich habe das Problem auf Folgendes reduziert:

<!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' ist 640x400, aber der Container div möchte 640x404 sein, wobei sich der Unterschied als schwarzer Streifen unter dem Bild zeigt. Das Div ist vorhanden, damit ich das Bild schwarz färben kann, indem ich seine Deckkraft auf 0 reduziere, es austausche und dann wieder einblende.

Ich habe mir die berechneten Stile in mehreren Browsern angesehen und kann nicht sehen, woher das 4px-Delta kommt.

css

— Chris
quelle

160

Versuch hinzuzufügen:

img { display: block; }

zu Ihrem CSS. Da an <img>standardmäßig ein Inline-Element ist, wird seine Höhe im Verhältnis zum Standardwert für die Zeilenhöhe unterschiedlich berechnet.

Bei Inline-Elementen gibt die CSS-Eigenschaft für die Zeilenhöhe die Höhe an, die für die Berechnung der Zeilenfeldhöhe verwendet wird.

Bei Elementen auf Blockebene gibt die Zeilenhöhe die minimale Höhe der Zeilenfelder innerhalb des Elements an.

Quelle: https://developer.mozilla.org/en/CSS/line-height

— sbeliv01
quelle

Das behebt es tatsächlich. Können Sie erläutern, warum dies einen Unterschied macht? (Ich halte nicht an zu akzeptieren - SO lässt mich nicht, bis 11 weitere Minuten vergangen sind)

— Chris

4

@ Chris - das ist der Grund, den ich dir gegeben habe: Dem imgist ein Implizit line-heightzugeordnet, das ihm einen vertikalen Raum zum Atmen gibt. Da dies line-heightnur für inlineElemente gilt, wird durch Setzen von imgto das display: blockentfernt line-height.

— Joseph Silber

@ Joseph - Ich hatte Ihre Antwort nicht gesehen, als ich die obige Anfrage gestellt habe. Da sie im Grunde genommen direkt und indirekt genau dasselbe erreichen, gibt es nicht viel zwischen den Antworten zu wählen. Es scheint nur fair zu sein, die Antwort zu akzeptieren, die zuerst eingetroffen ist, aber danke für Ihre Erklärung.

— Chris

1

Dies funktioniert auch mit inline-block. Danke für die Erklärung.

— Andrew Mao

20

Ihr Bild verwendet die Zeilenhöhe des übergeordneten Bilds. Versuche dies:

.imagebg { line-height: 0 }

— Joseph Silber
quelle

10

Versuchen Sie hinzuzufügen:

vertical-align: middle;

Dies wird in Google Material Design Lite verwendet, um die Lücke zwischen Audio, Leinwand, Iframes, Bildern, Videos und dem Boden ihrer Container zu schließen.

Material Design Lite: https://getmdl.io

Github-Diskussion: https://github.com/h5bp/html5-boilerplate/issues/440

— smnmnkr
quelle

Die akzeptierte Lösung ändert die Anzeige, was in meinem Fall nicht wünschenswert war. Dies funktionierte bei mir ohne Nachteile.

— David Neto

1

Abgesehen von anderen Arbeitsantworten sollte die displayEigenschaft des Elternteils flexauch für mich arbeiten:

.imagebg { display: flex }

— mimo
quelle

0

Grundsätzlich erhalten Sie diesen Fehler im IE, obwohl Sie nicht erwähnt haben, aber das ist die Tatsache. IE generiert zusätzlichen Platz unter dem <img>Tag. Daher ist es eine gute Praxis, die Bilder zu machen img { display: block; }.

EDIT: Man kann sagen, es ist ein Fehler von IE

— Subhajit
quelle

6

Ich habe IE nicht erwähnt, weil ich es nicht benutze. Safari, Chrome und Firefox zeigen alle dasselbe Verhalten. Die Antworten von Joseph und sbeliv01 funktionieren.

— Chris

Es ist kein Fehler des IE. Alle <img> sind standardmäßig vertikal nach der Grundlinie ausgerichtet. (vertikal ausrichten: Grundlinie), dh der niedrigste Punkt wird an der Grundlinie der Schrift ausgerichtet (z. B. niedrigster Punkt des Kreises im Buchstaben 'p'). Um dies zu ändern, müssen Sie nur eine andere Art der Ausrichtung festlegen, z. B. vertikal ausrichten: oben; oder vertikal ausrichten: unten;. Es ist nicht erforderlich, <img> in ein Blockelement umzuwandeln, da die inhärenten Inline-Eigenschaften hilfreich sein können.

— CaspianRoach

-3

Wenn Sie displaydas Element nicht ändern möchten , versuchen Sie es

margin-bottom: -4px;

— Denis Seletkov
quelle