Oben und unten immer gleiche Abstände mit CSS

[Rolf B]

Hallo Marx,

Der Selfhtml-Standpunkt ist: Lass Das Sein! Pixelgenaues Layout ist sowas von 90er, das tut man heute nicht mehr. Die Abstände sollten mit der Schriftgröße skalieren. Denn deine User können die Textgröße zoomen, ein pixelgenaues Layout geht daran zumeist kaputt. Setze deine Abstände in relativen Einheiten wie em, dann skalieren sie mit.

Wenn Du in der Situation bist, auf ein pixelgenaues Layout aus irgendwelchen Gründen angewiesen zu sein, lautet die erste Antwort, wie von Robert: margin-top und margin-bottom.

Es gibt dabei aber einiges zu beachten.

• Außer margin gibt es auch padding, was Zusatzabstände herbeiführen kann

• Inline-Elemente werden auf die Baseline von Text gesetzt. Ein Bild in einem div ist ein inline-Element, und die Text-Baseline ist nicht ganz unten im div, sondern etwas höher, um Schriften mit Unterlängen anzeigen zu können (also beispielsweise der untere Bogen im g). D.h. unter einem Bild ist immer etwas "Luft". Um das zu beheben, musst Du ihm ggf. display:inline-block zuweisen.

• Margins können zusammenfallen. Wenn eine Überschrift einen margin-botton von 30px hat und der nachfolgende Paragraph einen margin-top von 30px, dann ist der Abstand zwischen den beiden... 30px. Der kleinere Margin geht im größeren auf.

• Das Zusammenfallen von Margins kann entfallen, wenn ein neuer Blockformatierungskontext entsteht. MDN listet eine scheußliche Menge von Auslösern für BFC aus, die wichtigsten sind overflow:hidden und float.

Es ist nicht einfach und kann unter Umständen in eine wilde Jagd nach den Gründen für das Margin-Verhalten ausarten. Dabei helfen die Browser-Entwicklerwerkzeuge ein wenig, aber manchmal sitzt man trotzdem noch davor und verflucht den Browser. Prüfe bitte, ob Du mit Grid-Layout und einem gap deine Ziele einfacher erreichen kannst. Das bringt einen zwar gelegentlich auch zum Fluchen, ist aber eigentlich logischer.

Rolf