Antwort an „Rolf B“ verfassen

SELF-Forum

Zeilenabstand variieren

Rolf B

Hallo Gunnar Bittersmann,

Eine line-height von 1.4lh ist zulässig, hat aber eine andere Wirkung als eine line-height von 1.4.

body {
   font-size: 16px;
   line-height: 22px: /* um vom konkreten Font unabhängig zu sein */
}

body > p:nth-child(1) {
   line-height: 1.4;
}
body > p:nth-child(2) {
   font-size: 24px;
   line-height: 1.4;
}

body > p:nth-child(3) {
   line-height: 1.4lh;
}
body > p:nth-child(4) {
   font-size: 24px;
   line-height: 1.4lh;
}

<body>
<p>Absatz 1: font-size: 16px, line-height: 1.4 = 22.4px</p>
<p>Absatz 2: font-size: 24px, line-height: 1.4 = 33.6px</p>
<p>Absatz 3: font-size: 16px, line-height: 1.4lh = 30.8px</p>
<p>Absatz 4: font-size: 24px, line-height: 1.4lh = 30.8px </p>
</body>

Die beiden ersten Absätze verwenden die font-size des p-Elements, die Absätze 3 und 4 die line-height des Elternelements als Berechnungsgrundlage.

Jetzt nicht mehr. Berichtigt.

Ich habe nochmal drüberpoliert. Da war einiges unklar. Ich fand die Angabe von line-height:1.4 auch unpassend, es ist eine magic number, die je nach Font falsch sein kann. Ich habe es durch calc(1lh + 1px) ersetzt.

Dabei fällt mir auf: das Beispiel zieht den Parisienne-Font aus Google-Fonts. ARGH!

TODO für heute abend: Parisienne SELF-hosten!

Rolf

--
sumpsi - posui - obstruxi
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen