Leerraum zwischen Bildern und dem unteren Zellenrand entfernen

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Enthält eine Tabellenzelle nur ein Bild, so soll der Zwischenraum zwischen Bild und unterem Zellenrand entfernt werden (siehe nächste und übernächste Abbildung).

Abbildung: Der Zwischenraum unterhalb eines Bildes in einer Tabellenzelle.

Abbildung: Darstellung eines Bildes in einer Tabellenzelle als Blockelement.

Lösung

Definieren Sie das Bild als Blockelement:

Diskussion

Das Bild wird als Block-Level-Elemen dargestellt, damit kein Leerraum unterhalb des Bildes angezeigt wird. Dieser Leerraum entsteht, weil Bilder eigentlich als Inline-Inhalte (z.B. Text) angesehen werden. Der Browser platziert das Bild daher auf der Grundlinie, die eigentlich für Text verwendet wird – selbst wenn die Zelle eigentlich keinen Text enthält. Die Grundlinie befindet sich nicht ganz an der Unterkante der Zelle, da einige Buchstaben (z.B. g, p, q und y) über die Grundlinie hinaus nach unten ragen (siehe folgende Abbildung).

Abbildung: Durch die kleingeschriebenen Buchstaben g, p, q und y wird der Leerraum unterhalb des Bildes deutlich.

Diese sogenannte Unterlänge kann nicht entfernt werden, weil die Grundlinie prozentual zur Gesamtgröße der verwendeten Schrift berechnet wird. Daher besteht die beste Möglichkeit, Bilder ohne Berücksichtigung der Grundlinie zu platzieren, darin, die Darstellungsrolle des Bildes anhand der Eigenschaft display auf den Wert block zu setzen.

Dokumententyp-Definitionen

Eine weitere Methode, das Problem in den Griff zu bekommen, besteht darin, eine bestimmte DTD zu verwenden. Eine Dokumententyp-Definition (Document Type Definition, DTD) ist eine formale Anweisung, die die Beziehung der einzelnen Elemente einer Webseite zueinander festlegt. So gibt es zwischen der DTD für HTML 2 und der für HTML 4.1 eine Reihe von Unterschieden. Diese werden wiederum in einer eigenen DTD formuliert. Durch eine kleine Anweisung, die der eigentlichen Dokumentenstruktur (Markup) vorangehen muss, kann festgelegt werden, welche DTD für die Darstellung des Dokuments verwendet werden soll.

In vielen Browsern sorgen bestimmte DOCTYPE-Anweisungen dafür, dass der Browser im sogenannten Quirks-Modus anstelle des Standardmodus läuft. Mit dem Begriff Quirks-Modus bezeichnet man bestimmte Arten von nicht standardkonformem Verhalten der Browser. Befindet sich der Browser im Standardmodus, werden die Zwischenräume zwischen Bild und Tabellenrahmen angezeigt. Durch die Verwendung eines anderen Dokumententyps wird der Quirks-Modus aktiviert, wodurch das Dokument zwar immer noch validiert, der Zwischenraum aber nicht mehr angezeigt wird. Diesen können Sie auch einsetzen, wenn Sie den Standardmodus vermeiden möchten. Eine Tabelle, in der die Eigenheiten der verschiedenen DOCTYPEs und Browser verglichen werden, finden Sie unter The Web Standards Project: DOCTYPEs and their Respective Layout Modes.

Es kann sein, dass die Definition des Bildes als Blockelement nicht die beste Lösung darstellt, um den Leeraum unterhalb eines Bildes zu entfernen. Eine weitere Möglichkeit besteht darin, der Eigenschaft vertical-align für das Bild den Wert bottom zuzuweisen. Hierbei muss das Bild allerdings höher sein als die Zeilenbox der Zelle.

Siehe auch

Die CSS 2.1-Spezifikation zur Eigenschaft display.