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 ausserhalb des Borders). Diese Ebenen zu verstehen ist essenziell fuer CSS-Layout.
Content-Box vs Border-Box
Das Standard content-box Modell bedeutet dass Breite und Hoehe nur auf den Inhaltsbereich angewendet werden. Border-box schliesst Padding und Border in die deklarierten Breite und Hoehe ein, was generell intuitiver fuer Layout-Arbeit ist.
Margin-Kollaps
Angrenzende vertikale Margins von Block-Elementen kollabieren: nur der groessere Margin wird angewendet. Dieses Verhalten ueberrascht 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 fuer jedes Item. Der Flex- oder Grid-Container steuert die Item-Platzierung waehrend das Box-Modell jedes Items seine internen Dimensionen und Abstaende bestimmt.
