Kann mir das jemand erklären?
Druckbare Version
Kann mir das jemand erklären?
Ich habe es selbst herausgefunden. Man muss das CSS erweitern um:
figure {
line-height: 0;
}
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:Zitat:
Zitat von plusx
http://css-tricks.com/wp-content/css.../baseline2.png
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/