Browser Umsetzung der line-height Eigenschaft
Es gibt vier unterschiedliche Boxen:
- Containing Box: Der ganze Paragraph/Abschnitt/Absatz, das ganze Element.
- Inline Box: Alle in diesem Absatz verschachtelten Elemente, z.B. wenn ein Element durch <em></em> kursiv gemacht wird.
- die Höhe der Inline Box entspricht der line-height
- im Beispiel unten sind noch Rahmen in verschiedenen Farben eingefügt, die die Boxen sichtbar machen.
Bsp:
<p>Dies ist ein <em>neuer</em> Absatz,<br />
der zwei Zeilen lang ist.
<p>
Dies ist ein
neuer
Absatz,
der zwei Zeilen lang ist.
Dies ergibt eine Containing Box (grüner Rahmen) mit dem ganzen Satz. Diese Box enthält drei Inline Boxen (schwarzer Rahmen) in der ersten Zeile: “dies ist ein”, “neuer”, und “Absatz” und eine Inline Box in der zweiten Zeile. Ausserdem gibt es zwei Line-boxen (roter Rahmen): Die erste Zeile und die zweite Zeile.
- Line box: Diese Box entspricht allen Inline Boxen, die auf einer Zeile Platz in der Breite haben, die durch die Containing Box definiert ist.
Die Höhe der Line Boxen wird durch das höchste Element darin definiert: Also entweder die höchste Inline-Box, oder einem anderen Element, das in der Line-Box ist. Inline-Boxen können z.B. unterschiedliche Grössen durch die Definition einer anderen line-height, einer grösseren Schriftart, Hoch- oder Tiefstellen von Text, kursiv setzen von Text, usw. haben. Im Beispiel oben ist die Schriftgrösse des Wortes "Absatz" etwas grösser eingestellt, was dazu führt, dass die gesamte obere Line Box höher ist, als die untere.
Um die Vergrösserung der line-height beim Hoch- oder Tiefstellen zu verhindern, kann die line-height dieser Inline-Boxen auf 0 gesetzt werden, wodurch der halbe Durchschuss oben und unten vollständig entfernt wird.
Die Line-Boxen werden innerhalb der Breite der Containing-Box aufeinander gestapelt, und bilden so die Höhe der Containing-Box.
- Content Area: Dieser Bereich entspricht der Schriftgrösse vom Inhalt einer Inline-Box
Inline Box
Die Inline Box besteht aus der Content Area und dem halben Durchschuss oben und unten, die line-height (Zeilenhöhe).
Wenn die Zeilenhöhe (line-height) kleiner als die Schriftart definiert wird, entspricht die Höhe der Line Box der line-height: Der Inhalt kann also über die Inline-Box hinauslaufen und z.B. in die nächste Zeile rutschen.
Unten ist noch ein JSFiddle, bei dem die verschiedenen vorher erwähnten CSS Befehle gebraucht werden.
Die Schriftgrösse des Texts "ÄÂMofixj" ist mit 6rem (96px, da HTML font-size mit 16px definiert ist) definiert. Die grünen Balken rechts und links, die mit LH beschriftet sind, haben genau die Höhe der line-height Eigenschaft, die hier mit 10rem (160 px) definiert wurde.
Zum Herumspielen auch noch spannend: Wenn man die Schriftgrösse des HTML Elements ändert, wird alles mitskaliert, da die anderen Grössen in rem angegeben sind.
Nochmal zur eingangs bereits erwähnten komplizierten Geschichte des CSS-Pixels: die grösseren roten Rechtecke im Beispiel unten haben eine Grösse von 96px. Mein Laptop-Bildschirm (1440*900 px, 15'') hat eine Auflösung von 113.2 DPI. Diese 96px grossen Rechtecke sind 21.6 mm hoch, wenn ich diese nachmesse, was bedeutet, dass die 96px den physischen Pixeln entsprechen, da 96/113*2.54=2.157. Dies ist so bei eher tief auflösenden Geräten. Das CSS Pixel kommt vor allem bei höheren Auflösungen zum Tragen, z.B. bei einem Retina Screen, der bei 15" 2880*1800 Pixel hat, was 220 DPI entspricht.