Warum, wenn ich ein Bild in einem div mit line-height Zentrum, ist ein 3px Lücke an der Spitze erscheinen?

Question

Hier finden Sie aktuelle dieser Seite . Die Bilder auf der rechten Seite sollten in ihrem divs zentriert werden. Aber wenn man genau hinschaut, gibt es eine kleine Grenze von etwa 3 Pixel an der Spitze. Und wenn Sie die overflow: hidden (durch Firebug oder IE8-Äquivalent) zu deaktivieren, es klebt den Boden aus.

Der HTML-Code 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 die CSS, dies:

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 verursacht diese mysteriöse Lücke? Ich habe überprüft, Margen und Polsterung, und sie scheinen nicht das Problem zu sein.

Answer 1

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

Lassen Sie uns zunächst sehen, was die Spezifikation auf zu sagen hat führende und Halb führenden :

  

Da der Wert von ‚line-height‘ von der Höhe des Inhaltsbereich unterschiedlich sein kann, kann es Platz oben und unten gemacht Glyphen sein. Der Unterschied zwischen dem Inhalt der Höhe und dem verwendeten Wert von ‚line-height‘ ist die führende genannt. Die Hälfte der führende heißt die Halb führt.

     

Benutzerprogramme Zentrum Glyphen vertikal in einer Inline-Box, das Hinzufügen Halb führende auf der Ober- und Unterseite. Zum Beispiel, wenn ein Stück Text ‚12px‘ hoch ist und der ‚line-height‘ Wert ‚14px‘ sollte 2pxs mehr Platz hinzugefügt: 1px oben und 1px unter den Buchstaben. (Dies gilt auch Boxen leeren, als ob das leere Feld ein unendlich schmalen Buchstaben enthalten.)

So weit, so gut. So dass alle Zeilen-Boxen innerhalb einer div.small, die eine Höhe von weniger als der div.small des line-height haben wird vertikal mit dem div.small zentriert werden. Nun das Aussehen lassen auf die vertical-align Eigenschaft , insbesondere die middle Wert:

  

Ausrichten des vertikale Mittelpunkt der Box mit der Grundlinie des Stamm Box plus der Hälfte der x-Höhe der Mutter.

Beachten Sie, dass dies nicht unbedingt das Zentrum der Linie Box! Die genaue Position wird mit Ihrer Wahl der Schriftart und -größe ändern. Sie können dies überprüfen, indem Sie den Text zu vergrößern Zoomen und kleiner. Die Größe der Lücke ändert

Wie Sie gefunden, font-size: 0 Einstellung entfernt die Lücke vollständig. Wie die Schrift jetzt keine Höhe hat, bekommt die Linie Box ein führender und Halb führenden von 50px, mit der Basislinie vertikal zentriert. Um das Bild vertical-align: middle zu machen, setzt der Browser seinen Mittelpunkt an dieser Basislinie plus die x-Höhe der Schriftart, der jetzt gleich null ist. Daraus ergibt sich eine vertikal zentrierte Bild.

Answer 2

Es stellte sich heraus, font-size:0; auf den div behebt das Problem zu setzen. Allerdings ist es noch nicht, die Lücke erklären. Wer weiß, was verursacht die Lücke?

Answer 3

Ich kann nicht ganz erklären, was passiert ist, aber nach dem gleichen Problem zu tun, wie es scheint es etwas mit der Art und Weise zu tun hatte font-Eigenschaft in CSS Ich wurde erklärt, z.

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

= schlecht für Tabellen offensichtlich. ! - ich diese Erklärung entfernt und stattdessen font-size verwendet: 11px, line-height: px, font-family, etc, und es fixiert die Lücke