– Today I Learned …

display

display: block; display: inline; display: none;
display: flex; display: grid; display: contents;

display reguliert als wichtigstes Layout-Werkzeug das Verhalten fast aller Elemente

box-sizing

BLOCK-ELEMENT {box-sizing: border-box; }

Breiten und Höhen eines Block-Elements richten sich nicht nur an den Dimensionen des Inhalts aus – hinzu kommen noch padding (Innenabstand) und border (Randbreite)

stapeln sich mehrere Boxen innerhalb, führen deren padding und border häufig zu (ungewünschten) Layout-Verschiebungen

dieses Problem verschärft sich, da Breite des Inhalts, des Innenabstands und des Randes oft in unterschiedlichen Maßeinheiten definiert werden (px, %, em …)

box-sizing auf border-box festzulegen, zwingt den Browser alle Komponenten innerhalb der Box zu rendern.

width / max-width

um überbreite Texte zu vermeiden und die Lesbarkeit zu erhöhen, lege man eine Zeichenanzahl pro Zeile fest, die aber den ganzen Platz beanspruchen darf

max-width: 60ch; width: 100%;

um verschiedendste Bildschirmgrößen zu berücksichtigen, lege man für BLOCK-Elemente ebenfalls eine max-width (Maximalbreite) fest, die aber 100 %ig genutzt werden darf

font-size

statt fester Zeichengrößen (px, pt, cm …) verwende man stets bildschirmabhängige (relative) Zeichengrößen (ch, em, rem, vh …)

jedes Zeichen eines Buchstaben ist 1 em hoch und 1 em breit
[lt. Vorgabe entsprechen 1em bzw. 1rem ~ 16px]

da auch Schriftgrößen vererbt werden, ist die Bezugname auf das Root-Element sinnvoller

für moderne Browser empfielt sich die Verwendung der clamp-Funktion für Schriftgrößen (Minimum, Optimum, Maximum):

h1 {font-size: clamp(16px, 2vw, 24px); }

vw ähnelt Prozent, bezieht sich aber auf die Viewport-Breite

Achtung: ch, em oder rem sind Maßeinheiten für font-size (weniger für Layout-Elemente ! [hier besser px, %, vw …])

line-height

die Zeilenhöhe beeinflußt maßgeblich die Lesbarkeit von Texten

line-height: 1.6em;

Vorgabegrößen:

Element	font-size	line-height
p	1em (16px)	1.2em (19.2px)
h1	2em (32px)	2.34em (37.44px)
h2	1.5em (24px)	1.74em (27.84px)
h3	1.17em (18.72px)	1.41em (22.56px)
li	1em (16px)	1.2em (19.2px)

display: flex

die einfachste Art, Objekte auf dem Bildschirm anzuordnen (unabhängig von dessen Größe und Ausrichtung) ist die Verwendung von display: flex

.cont {display: flex; gap: 1rem;}

die im Container enthaltenen Elemente richten sich flexibel nach dem verfügbaren Platz aus – gap sorgt für eine Vorgabe-Lücke zwischen Objekten