[CSS] Abstände

[Happy Nihilist]

Folgender Code-Auszug:

<div style="margin:0px"><img src="images/phpugmg_01.gif" alt="" /></div>
                           <div style="margin:0px"><img src="images/phpugmg_01.gif" alt="" /></div>

Nach diesem Code muessten die beiden Grafiken bündig aneinander gerendert werden. Das tun sie auch, allerdings nur im IE. Firebird zaubert einen Abstand von 7 Pixel dazu. Auch in Tabellen tauchen diese 7 Pixel auf. Ich habe es natürlich auch mit Text gestestet. 1 Pixel Abstand. Ist jemandem dieses problem bekannt, oder hat jemand eine andere (bessere) Idee, wie ich eine blinde Tabelle in XHTML 1.1 Code schreiben kann?

Anmerkung: Ich weiß, dass das style-Attribut nicht mehr 1.1 gültig ist, habe es aber der einfachheit halber statt des CSS-Codes hier gepostet!

[Happy Nihilist]

Bin dann nach etwas nachforschen im Internet doch noch auf die Lösng gekommen: Ich habe keine Line-Height Angabe gemacht!

[wahsaga]

Re: [CSS] Abstände

JFYI noch eine kurze erklärung, warum dieses problem auftritt.


bilder werden standardmässig an der sog. baseline ausgerichtet.
diese baseline bildet die linie, auf der bei der darstellung von text die buchstaben "stehen" - darunter wird allerdings noch platz gelassen für die sog. unterlängen, also das was beim "g" oder "j" nach unten rausragt.

der mozilla hält sich in diesem punkt etwas exakter an den standard. also stellt er ein bild so dar, dass der untere rand immer auf dieser baseline liegt - darunter bleibt also noch ein wenig platz übrig; selbst wenn neben dem bild gar kein text angezeigt wird, das verhalten bleibt trotzdem gleich.

umgehen lässt sich das auf verschiedene weisen.
eine davon hast du mit einer geeigneten line-height angabe ja schon gefunden; daneben würden auch vertical-align:bottom oder display:block für das bild diesen effekt aufheben.