image_container - Immer 5px Rand nach unten

[Dublay]

Hallo Community,

mal eine generelle Frage, weil mir das immer mal wieder Kopfzerbrechen bereitet. Das normale Inhaltselement "Bild" hat nach unten immer 5px Rand. Ist das so gewollt? Das ist recht störend, wenn man z. B. einen Balken mit der Caption von unten über das Bild legen möchte oder Bilder als Galerie mit gleichen Abständen (oben/unten/rechts/links) darstellen möchte.

Vielleicht ist das auch für irgendetwas nützlich? Falls ja, ok - aber wie kann ich das abstellen?

Beispiel: https://demo.contao.org/en/media-elements.html

Bildschirmfoto 2023-07-04 um 21.24.53.png

[Spooky]

Das normale Inhaltselement "Bild" hat nach unten immer 5px Rand. Ist das so gewollt?

Das ist nicht by default so und kommt rein auf dein CSS an.

Beispiel: https://demo.contao.org/en/media-elements.html

Dort ist kein Margin definiert. Der Abstand, den du meinst, resultiert aus folgendem CSS in der Contao Demo:

#container .image_container a img {
    display: inline-block;
}

Bzw. auch ohne diese Anweisung wäre ein Abstand vorhanden. Um keinen Abstand zu haben, musst du die <img> auf display: block setzen.

[Dublay]

Danke für den Hinweis.

.image_container img {
	display: block;
}

Das löst das "Problem".

[sigmar]

Info am Rande weil ich immer wieder selbst froh darum war: Problem besteht eigentlich bei jedem Element mit der Eigenschaft display: inline-block. Also auch SVGs und Iframes.
Dieser kleine Schnippsel hilft dabei das Styling etwas berechenbarer zu machen, indem dieser Abstand entfernt wird und gleichzeitig die Eigenschaften von display: inline-block erhalten bleiben.

img,
svg,
iframe,
canvas,
[style*='inline-block'] {
    vertical-align: middle;
}