display
Das wichtigste Layout-Werkzeug überhaupt
display: block; display: inline; display: inline-block; display: none; display: flex;
Erklärt warum Elemente sich so verhalten, wie sie es tun und ist die Grundlage für fast alle Layout-Fragen
box-sizing
Verhindert Frust
* {
box-sizing: border-box;
}
Breiten/Höhen werden plötzlich logisch und fast jedes moderne Projekt box-sizing global
margin & padding
Abstände verstehen bedeutet Layout verstehen
padding: 1rem; margin: 0 auto;
Unterschied innen vs. außen und zentrale Ursache für „Warum ist da Platz?“
width / max-width
Responsive Denken von Anfang an
max-width: 60ch; width: 100%;
verhindert überbreite Texte und ist wichtig für Lesbarkeit
font-size
font-size: 1rem;
Einheiten (rem, em) verstehen
line-height
line-height: 1.5;
enormer Einfluss auf Lesbarkeit und wird oft unterschätzt
white-space
white-space: nowrap; white-space: pre-wrap;
erklärt „verschwindende Zeilenumbrüche“ und ist wichtig bei CMS-Texten
display: flex
Der größte Aha-Moment
.container {
display: flex;
gap: 1rem;
}
ersetzt 80 % alter Hacks und ist perfekt für Navigation, Cards, Buttons
gap
gap: 1rem;
saubere Abstände und beendet das Margin-Chaos
position
position: relative; position: absolute;
wichtig für Tooltips, Badges, Overlays, aber nicht für komplettes Layout missbrauchen
