03.01.2008

Lücke am unteren Bildrand

Mitunter hat man das seltsame Phänomen, dass zwischen einer Grafik und einem darunter angeordneten Div eine störende Lücke von wenigen Pixeln besteht. Allerdings ist dies Browser- bzw. Doctype-abhängig. Der Internet-Explorer (6 und 7) zeigt diese Lücke; der Firefox ebenso, allerdings nur dann, wenn als Doctype HTML/XHTML Strict verwendet wird.
Wie das aussehen kann, ist in Demo 1 dargestellt.

Welche Ursache hat die ominöse Lücke?

Sehen wir uns zunächst den Quelltext von Demo 1 an:

<img src="../img/0009/mohn.JPG" width="150" height="200" border="0" alt="Mohn"> 
<div style="width:500px; background: #aaa; padding: 15px;">
<h4>Demo 1 mit Lücke zwischen Grafik und folgendem Div</h4>
</div>

Nach einer eingebundenen Grafik folgt ein ganz normaler Div, bei dem kein oberer Außenabstand definiert ist.
Das "<img>"-Element ist ein sogenanntes "Inline-Element", das wie normaler Text im Textfluss steht. Es steht damit auf einer imaginären Grundlinie ("Schriftlinie"), auf der auch die Textbuchstaben angeordnet sind wie Demo 2 zeigt. Bestimmte Buchstaben wie z.B. "g, j, p, q, y" durchbrechen dabei die Schriftlinie nach unten. Ihr erinnert euch bestimmt an die Grundschulzeiten, wo diese Linien exakt in den Schulheften eingezeichnet waren.
Hier nochmal zur Verdeutlicheung die rot-markierte "Lücke" aus Demo 2:

Lücke im IE

Da die Grafik wie gesagt ein Inline-Element ist, ist deren Anordnung "mit Lücke" völlig korrekt, weil hier ein gewissen Platz unterhalb der Schriftlinie für bestimmte Zeichen berücksichtigt wird.

Wie kann die Lücke unterbunden werden?

Man funktioniert das Inline-Element "<img>" zum Blockelement um. Wir müssen ihm hierzu lediglich ein display: block; zuweisen und schon ist die störende Lücke verschwunden. Also

<img style="display: block;" src="../img/0009/mohn.JPG" width="150" height="200" border="0" alt="Mohn">

Eine generelle Definition der Bilder als "Bockelemente" kann auch in den CSS-Style-Angaben mit img {display: block;} erfolgen.

Ebenso reicht auch eine Float-Angabe, weil diese grundsätzlich alle Elemente als Blockelemente darstellt.
Das Ergebnis ist aus Demo 3 ersichtlich.

Dieses Thema kann hier noch weiter vertieft werden.

nach oben

Webspace preiswert! - Alfahosting.de