Warum, wenn ich ein Bild in einem div mit line-height zentrieren, erscheint eine 3px Lücke an der Spitze?

Question

Werfen Sie einen Blick auf diese Seite . Die Bilder auf der rechten Seite sollten innerhalb ihrer Divs zentriert werden. Aber wenn Sie genau hinsehen, gibt es einen kleinen Rand von etwa 3 Pixeln oben. Und wenn Sie die overflow: hidden (über Firebug oder das IE8-Äquivalent), ragt es unten heraus.

Das HTML ist dies:

<div class="small">
    <img src="/images/photos/Bedroom.jpg" alt="Bedroom" />
</div>
<div class="small">
    <img src="/images/photos/View.jpg" alt="View" />
</div>

Und der CSS, das hier:

div.small
{
    width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
    overflow:hidden;
    margin:5px;
    background-color: #C0C0C0;
    float:left;
}
div.small img
{
    vertical-align: middle;
    max-width:100px;
    max-height:100px;
    display: inline;
}

Was ist die Ursache für diese mysteriöse Lücke? Ich habe die Ränder und die Füllung überprüft, und sie scheinen nicht das Problem zu sein.

Answer 1

NB: Ich bin mir nicht ganz sicher, ob diese Erklärung richtig ist, aber sie erscheint mir vernünftig.

Sehen wir uns zunächst an, was die Spezifikation zu folgenden Punkten sagt führend und halbführend :

Da der Wert von "line-height" von der Höhe des Inhaltsbereichs abweichen kann, kann über und unter gerenderten Glyphen Platz sein. Die Differenz zwischen der Höhe des Inhalts und dem verwendeten Wert von "line-height" wird als Zeilenabstand bezeichnet. Die Hälfte des Abstandes wird als halber Abstand bezeichnet.

Benutzeragenten zentrieren Glyphen vertikal in einem Inline-Kasten und fügen oben und unten einen halben Zeilenabstand hinzu. Wenn zum Beispiel ein Textstück "12px" hoch ist und der "line-height"-Wert "14px" beträgt, sollten 2px zusätzlicher Platz hinzugefügt werden: 1px über und 1px unter den Buchstaben. (Dies gilt auch für leere Kästen, als ob der leere Kasten einen unendlich schmalen Buchstaben enthielte).

So weit, so gut. Alle Zeilenboxen innerhalb einer div.small die eine geringere Höhe haben als die div.small 's line-height wird vertikal zentriert mit dem div.small . Sehen wir uns nun an el vertical-align Eigenschaft insbesondere die middle Wert:

Richten Sie den vertikalen Mittelpunkt des Rahmens an der Grundlinie des übergeordneten Rahmens plus der Hälfte der x-Höhe des übergeordneten Rahmens aus.

Beachten Sie, dass dies nicht notwendigerweise die Mitte des Linienkastens ist! Die genaue Position hängt von der Wahl der Schriftart und -größe ab. Sie können dies überprüfen, indem Sie den Text vergrößern und verkleinern: Die Größe der Lücke ändert sich.

Wie Sie festgestellt haben, ist die Einstellung font-size: 0 beseitigt die Lücke vollständig. Da die Schrift jetzt keine Höhe mehr hat, erhält der Zeilenrahmen einen Vor- und Halbabstand von 50 Pixel, wobei die Grundlinie vertikal zentriert ist. Zum Rendern der vertical-align: middle Bildes setzt der Browser seinen Mittelpunkt auf diese Grundlinie plus die x-Höhe der Schrift, die jetzt Null ist. Dies ergibt ein vertikal zentriertes Bild.

Answer 2

Es stellt sich heraus, dass die Einstellung font-size:0; auf dem Div behebt das Problem. Allerdings erklärt es immer noch nicht die Lücke. Weiß jemand, was verursacht die Lücke?

Answer 3

Ich kann nicht ganz erklären, was passiert, aber nach dem Umgang mit dem gleichen Problem, es scheint, es hatte etwas mit der Art, wie ich Schriftart Eigenschaft in CSS, z. B. deklariert wurde zu tun.

font:11px/1.35em Verdana, Arial, Helvetica, sans-serif;

\= offenbar schlecht für Tabellen. -- Ich habe diese Deklaration entfernt und stattdessen font-size:11px, line-height:px, font-family, etc. verwendet, und die Lücke ist behoben!