Zum Inhalt springen

CSS Box-Modell: Margin-Collapse und praktische Layouts

Schritt 3 von 7

Praktische Layouts mit Margin-Collapse

Wir können Margin-Collapse nutzen, um elegante Layouts zu erstellen. Zum Beispiel, wenn du mehrere Absätze in einem Container haben möchtest, die gut zusammenpassen. Wir setzen den margin-bottom des ersten Absatzes und den margin-top des folgenden Absatzes auf 0, um das Zusammenfallen zu vermeiden.

<div style="background-color: lightblue; padding: 10px;">
<p style="margin-bottom: 0;">Dieser Absatz hat keinen unteren Margin.</p>
<p style="margin-top: 0;">Dieser Absatz hat keinen oberen Margin.</p>
</div>