Auch Bilder sind “in line”

Inline-Elemente sind für viele Frontend Entwickler mehr oder minder „unbekannte“ Elemente, welche ein Dasein im Schatten des nur allzu bekannten und dominanten Block-Elements führt. Dabei bringen Inline-Elemente eine Reihe von Eigenschaften mit, welche jeder Entwickler kennen sollte – denn ohne sind gewisse Effekte beim Erstellen eines Layouts nicht zu erklären. Das Inlin-Elemente keinen Umbruch erzeugen ist allgemein bekannt. Darüber hinaus, haben Inline-Elemente aber viele weitere Eigenarten. Alle Inline-Elemente folgen einander in einer Linie. Daher werden sie auch «in»line genannt. Genaugenommen sind auch einzelne Buchstaben nichts anderes als eine Aneinanderreihung von Inline-Elementen.

Eine solche „line“ hat eine Höhe – diese wird immer durch die Schriftgrösse bestimmt, ist aber um etwa 15% grösser als die Schriftgrösse. Die Elemente liegen jedoch nicht wie im ersten Moment vielleicht anzunehmen ganz „unten“ oder „oben“ in dieser Linie, sondern ruhen auf einer imaginären Linie dazwischen – ich nenne diese unsichtbare Linie «Basis-Linie»¹. Diese Linie dient dazu, dass „überhängende“ Buchstaben wie etwa ein «g» nicht aus der „line“ fallen.

Der Abstand zur Oberkannte der nächsten Line entspricht der CSS Eigenschaft line-height – ebenso ist dies der Abstand zwischen zwei Basis-Linien. Inline-Elemente ruhen grundsätzlich auf dieser Basis-Linie und können den Abstand der Linen selber nicht verändern – selbst wenn das Element höher ist. Dies äussert sich darin, dass man einem solchen Element zwar einen vertikalen Innenabstand² geben kann – und dieser auch angenommen wird³ – dadurch jedoch der Abstand zur nächsten Linie nicht verändert wird. Ein Rahmen um ein Inline-Element umschliesst jedoch nicht die Linien-Höhe sondern die Höhe der „line“ – also Schriftgrösse plus etwa 15%⁴.

Auch Bilder sind bekanntlich Inline-Elemente. Sonst könnten wir keine Icons in einer Textzeile platzieren, ohne dass dieses einen Umbruch erzeugt. Wie alle anderen Inline-Elemente folgen auch Bilder den Gesetzen der «Inline-Graviation» – das heisst, sie ruhen auf der imaginären «Basis Linie». In manchen Layouts werden jedoch Bilder verwendet, welche nicht direkt von Text umschlossen wird. Das führt dazu, dass besagte Inline-Eigenschaften schnell vergessen werden können. Ist das Bild von einem Block-Element umschlossen und gibt man diesem Element einen Rand, liegt diese erstaunlicherweise nicht bündig mit der Bild Unterkante. Dies ist natürlich nicht wirklich «erstaunlich» sondern kommt von der etwa 7.5% höherligenden Basis-Linie, auf welcher das Bild ruht.

Diesem Umstand sind wir jedoch nicht hilflos ausgeliefert. Mit der CSS Eigenschaft vertical-align können wir bestimmen, wo ein Element innerhalb der Linie zu liegen kommt. Ob es also auf der unsichtbaren Basis Linie liegt oder nicht, ist beeinflussbar. Der Standard dieser Eigenschaft ist «baseline». Wenn der Rahmen um das Bild also auf der Unterkante anliegend sein soll, darf das Bild nicht mehr auf der «baseline» liegen, sondern muss sich ganz unten in der Line befinden. Folgende Beispiele zeigen ein Bild mit dem Standard-Wert «baseline» und dem Wert «bottom» welcher das Problem löst: