nicht angemeldet
Hallo
Grundsätzlich sollen Grafiken nur so groß sein wie sie maximal angezeigt werden sollen. Grafiken mittels CSS auf eine Maximalgröße zu verkleinern führt immer mal wieder zu Problemen. Zudem wird die Datengröße für die Besucher unnötig groß.
Die Abstände der figure-Elemente werden mit margin festgelegt.
Die figcaption-Elemente werden mittels position an den unteren Rand des figure-Elements gelegt. Feste Höhen, auch mittels line-height, sollten unterbleiben. Die Höhe des figure-Elements wird wie üblich durch den Inhalt bestimmt. So machen auch Zeilenumbrüche keine Probleme.
Der große Abstand kommt durch das "position: relative" bei figcaption. Dadurch kann zwar das Element verschoben werden, sein Platz bleibt im Gegensatzu zu "position: absolute" aber reserviert und wird deshalb angezeigt.
Heißt: Du willst mittels CSS zuviel bestimmen und hinderst dadurch den Browser seine Arbeit korrekt zu verrichten.
Gruss
MrMurphy
marctrix