Gedanken - line-height und Abstände
1. Vorwort
Dies ist das erste Mal, dass ich mich über etwas aufrege und mich darüber so richtig auskotze! Denn seit längerer Zeit beobachte ich bei CSS einen Trend, denn ich für völlig hirnrissig halte. Gut, es mag viele Leute geben, die davon begeistert sind, aber ich bekomme dabei regelmäßig die Krätze.
2. Die Unsitte
Um einen vertikalen Abstand für bestimmte Elemente zu definieren, greifen viele Entwickler auf line-height zurück. Und für
den horizontalen Abstand nehmen sie dann padding-left/padding-right. Oder noch schlimmer, line-height
und padding werden miteinander kombiniert. Leider hab ich schon das eine oder andere Mal erlebt, dass dieser Murks auch
in diversen Erweiterungen von JavaScript-Frameworks auftaucht.
"Mausschubser"
... machen sich leider Gottes sehr oft keine Gedanken über die Auswirkungen. Da wird fröhlich drauflos designed, frei nach dem Motto: "des passt scho". Und auf einmal sind die dann ganz erstaunt, wenn etwas nicht in ihr Konzept passt. Oder weil sie einfach nicht nachgedacht haben.
3. Ein Beispiel
Ne pisselige "Navigation"
OK, schön sieht das nicht aus. Hier geht es nur um grundsätzliche Dinge. Der vertikale Abstand wurde hier mit dem berüchtigten
line-height gesetzt und sieht eigentlich noch ganz gut aus. Aber was ist, wenn ein Menülink auf einmal über zwei Zeilen
geht? Dann sieht das auf einmal ziemlich sch***e aus, da der Abstand der Zeilen einfach viel zu groß ist.
4. Noch ein Beispiel
Beim Arbeiten mit line-height verschiebt sich der Text immer nach unten, wenn der Wert größer ist als bei font-size.
Und da kann es schon mal Probleme mit der Positionierung geben. Aus Anschauungsgründen habe ich hier eine Überschrift 4. Ordnung in ein
<div> mit grauem Hintergrund gepackt. Und nun sollte besagtes <h4> direkt am oberen Rand stehen.
Tut es aber nicht wegen des line-height.
Eine Überschrift 4. Ordnung
Bitte nicht lachen
... aber ich habe es schon etliche Male erlebt, dass in so einem Fall tatsächlich mit einem negativen padding-top beim
<div> oder mit einem negativen margin-top beim <h4> gearbeitet wurde, da ja unbedingt
mit line-height gearbeitet werden musste.
5. Meine Meinung
Wenn man schon Abstände definieren will, so sollte man mit margin oder padding arbeiten. Denn die wurden dafür
extra geschaffen! Das line-height nimmt man nur, wenn man die Zeilenhöhe in einem Fliesstext festlegen
möchte. Ansonsten lässt man tunlichst die Finger davon und missbraucht es nicht für andere Zwecke.
Erfahrungswerte
Auch wenn die beiden Beispiele hier ein wenig dünn sind, so müsst ihr mir einfach mal vertrauen. Ich habe schon bei diversen Projekten
erlebt, dass die Verwendung von line-height bei der Definition von Abständen eigentlich immer zu Problemen führt. Und zu einem
ziemlich großen Aufwand, um den Mist zu korrigieren. Hinzu kommt noch, dass ein pixelgenaues Design in zig Browsern auf diversen
Betriebssystemen oft nicht möglich ist. Denn die verwendeten Schriften laufen trotz gleichen Namens immer ein klein wenig unterschiedlich
und dann passt hier was nicht oder da nicht.
6. Eure Meinung
... dazu interessiert mich natürlich auch. Wenn ihr zu diesem Thema Fragen, Anregungen oder Kritik habt, so schickt mir einfach eine Mail und ich werde den Inhalt hier veröffentlichen. Wer sich fragt, warum ich keinen Blog habe, dem sei gesagt, dass ich darauf im Moment noch keinen Bock auf blog habe. Vielleicht richte ich mir einen ein, wenn ich dazu Zeit und Muße habe.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt