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 nicht in allen Browsern: Im Internet-Explorer (6 und 7) herrscht diese Lücke, im Firefox dagegen nicht.
Ausnahmsweise hat diesmal der Internetexplorer mit seiner Darstellung recht, obwohl es gerade bei ihm "falsch" aussieht.
Wie das aussehen kann, ist in Demo 1 dargestellt (im Firefox jedoch nicht ersichtlich).
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:
Da die Grafik wie gesagt ein Inline-Element ist, ist deren Anordnung im Internet Explorer völlig korrekt, weil der auch einen gewissen Platz unterhalb der Schriftlinie für bestimmte Zeichen berücksichtigt.
Wie kann die Lücke unterbunden werden?
Um die Lücke zu unterbinden, gibt es verschiedene Möglichkeiten:
Man kann das Inline-Element "<img>" zum Blockelement umfunktionieren. Wir müssen ihm hierzu lediglich ein display: block; zuweisen und schon ist die störende Lücke im Internet Explorer verschwunden. Also
<img style="display: block;" src="../img/0009/mohn.JPG" width="150" height="200" border="0" alt="Mohn">
Den gleichen Effekt erreicht man, indem man dem <img> ein vertical-align: bottom; zuweist: Also
<img style="vertical-align: bottom;" src="../img/0009/mohn.JPG" width="150" height="200" border="0" alt="Mohn">
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
