EMZETT.Jedes Element ist eine Box aus Inhalt, padding (Innenabstand), border (Rand) und margin (Außenabstand). Mit box-sizing: border-box zählen Padding und Rand zur angegebenen Breite, was Layouts viel einfacher macht. Einheiten: px (fest), rem (relativ zur Grundschrift), %, vw/vh.
Elemente sind block (eigene Zeile) oder inline (im Textfluss).
*, *::before, *::after { box-sizing: border-box; }
.box {
width: 300px;
padding: 1rem;
border: 2px solid #333;
margin: 1rem auto; /* zentriert */
}
.hell { background: hsl(210 40% 96%); }Merke
Box: Inhalt, Padding, Rand, Margin
border-boxrechnet Padding in die Breite einremskaliert mit der Grundschrift
Aufgabe
Zentriere eine 400px breite Box mit Rand und Abstand.