Warum haben in Contao alle Bilder einen 4px Abstand nach unten?

[plusx]

Kann mir das jemand erklären?

[plusx]

Ich habe es selbst herausgefunden. Man muss das CSS erweitern um:

figure {
line-height: 0;
}

[Spooky]

Kann mir das jemand erklären?

Mit Contao selbst hat das nichts zu tun. Da das <img> ein inline Element ist werden die images by default (im W3C Standard so festgelegt) auf der sogenannten "Baseline" einer Zeile platziert:



In diesem Beispiel-bild erstreckt sich die line-height vom obersten Ende des "T"s bis zum untersten Ende des "p"s. Da das image auf der Baseline liegt, aber als inline Element trotzdem den vollen Platz einer regulären Textzeile einnimmt, bleibt unterhalb des Bildes eben ein Abstand über. Mögliche Lösungen sind eben dem Eltern Element bspw. eine font-size:0 oder line-height:0, oder gar dem img selbst ein display:block zu geben.


Nicht vergessen die line-height für etwaige <caption> Elemente im <figure> wieder zu resetten.




Bild von: http://css-tricks.com/what-is-vertical-align/