Mattes: Zeilenhöhe bestimmen

Beitrag lesen

Wie ist die Syntax für style="line-height: 20px
Natürlich habe ich beim Basteln die Zeil dreimal geladen.
Wie sieht die richtige aus?

<p style="line-height: 20px;">line-height: 20px;</p>
            <p style="line-height: 200%;">line-height: 200%;</p>
            <p style="line-height: normal;">line-height: normal;</p>

Dein Problem ist vermutlich nicht die Syntax, sondern dass du schlichtweg Werte genommen hast, die sich kaum unterscheiden.

20px und normal sind bei mir beispielsweise nach Augenmaß identisch, denn bei einer Standardschriftgröße von 16 Pixeln ist die Zeilenhöhe 19 Pixel (16 * 1,2).

Der Unterschied zu 200% erscheint vom Wert her zwar groß, ist auf dem Bildschirm aber auch nur bei genauem Hinsehen zu erkennen, denn der tatsächliche Zugewinn schrumpft dahin, wenn man bedenkt, dass die Zeilenhöhe sich logischerweise in die Schrifthöhe und einen oberen und einen unteren Freiraum aufteilen muss.
Damit bleiben je Freiraum – 32 Pixel Zeilenhöhe abzüglich 16 Pixel Schrifthöhe, dies in 2 Bereiche geteilt – nur 8 Pixel bzw. 6,5 Pixel mehr Abstand als bei "normal". Das ist kaum die halbe Schrifthöhe, bei drei bis vier Pixeln pro Millimeter ein größerer Fliegenschiss. Obendrein gehen diese 6,5 Pixel Zugewinn auch noch über in den 16 Pixel großen Außenabstand des Absatzelements <p> – oder besser gesagt: Sie gehen darin unter.