Die Vier Ebenen
Jedes Element hat Inhalt (der Text oder Kindelemente), Padding (transparenter Raum innerhalb des Borders), Border (ein sichtbarer Rand) und Margin (transparenter Raum außerhalb des Borders). Diese Ebenen zu verstehen ist essenziell für CSS-Layout.
Content-Box vs Border-Box
Das Standard content-box Modell bedeutet dass Breite und Höhe nur auf den Inhaltsbereich angewendet werden. Border-box schliesst Padding und Border in die deklarierten Breite und Höhe ein, was generell intuitiver für Layout-Arbeit ist.
Margin-Kollaps
Angrenzende vertikale Margins von Block-Elementen kollabieren: nur der größere Margin wird angewendet. Dieses Verhalten überrascht viele Entwickler. Padding, Border, Inline-Elemente und Flexbox-Container verhindern den Kollaps.
Box-Modell in Flexbox und Grid
In Flexbox- und Grid-Layouts gilt das Box-Modell weiterhin für jedes Item. Der Flex- oder Grid-Container steuert die Item-Platzierung während das Box-Modell jedes Items seine internen Dimensionen und Abstaende bestimmt.
