Was ist das CSS Box-Modell?
Im CSS Box-Modell sind Elemente auf der Seite als Rechtecke (oder "Boxen") dargestellt. Jede Box besteht aus Inhalt, Padding, Border und Margin. Margin-Collapse, ein interessantes Phänomen in CSS, beschreibt das Zusammenfallen der Margins von benachbarten Elementen. Dies ist besonders relevant, wenn du eine reine, übersichtliche Seite gestalten möchtest. Ein Beispiel: Wenn du zwei benachbarte Absätze erstellst, die beide 10px Margin haben, sieht es so aus, als hätten sie zusammen einen 20px Margin. Dies passiert, weil die Margins zusammenfallen. Wir werden sehen, wie wir dies kontrollieren können, um unsere Layouts zu optimieren.
<div style="background-color: lightblue; margin: 10px;">
<p style="margin: 10px;">Dieser Absatz hat 10px Margin.</p>
</div>
<div style="background-color: lightblue; margin: 10px;">
<p style="margin: 10px;">Dieser Absatz hat ebenfalls 10px Margin.</p>
</div>