Chciałbym podzielić się pewną informacją, która dla wszystkich którzy czytali moją książkę CSS: The Definitive Guide i inne moje książki nie będzie żadną nowością, ale którą muszę powiedzieć głośno, publicznie, tak, aby każdy się to tym dowiedział.

Własność line-height przyjmuje wartości bez jednostki. Można jej przypisywać także wartości z jednostkami, ale raczej nie powinno się tego robić. Liczby bez jednostki są dla tej własności bardzo dobrym wyborem.

W takim razie, jaka jest różnica? Gdy stosujemy wartości z jednostkami, jak np.: 1em, są one po obliczeniu przekazywane na elementy potomne. Załóżmy np., że zastosowaliśmy poniższy arkusz CSS do dokumentu zawierającego następujący urywek kodu HTML:

ul {font-size: 15px; line-height: 1em;}
li {font-size: 10px;}
small {font-size: 80%;}

<ul>
  <li>Jestem listą z <small>małym tekstem</small>.</li>

</ul>

Po obliczeniu własność line-height elementu ul będzie miała wartość 15px, ponieważ wartości własności line-height wyrażone za pomocą jednostek em są obliczane na podstawie obliczonej wartości własności font-size elementu. Wartość własności font-size zadeklarowałem bezpośrednio, więc wiemy, że jest wyrażona w pikselach.

(Tak, wiem, że nie należy ustawiać rozmiaru tekstu w pikselach, ale przy użyciu tej jednostki łatwiej to wszystko objaśnić.)

Zatem do elementów potomnych zostaje przekazana obliczona wartość 15px. Elementy li i small odziedziczą własność line-height o wartości 15px. Koniec. Nie zmienią jej, gdy zmieni się ich własny rozmiar pisma. W istocie nie zmienią jej nigdy. Po prostu biorą te 15px i używają ich, co jest równoznaczne z tym, jakbyśmy napisali:

ul {font-size: 15px; line-height: 1em;}
li {font-size: 10px; line-height: 15px;}
small {font-size: 80%; line-height: 15px;}

Dobra, teraz wyobraź sobie, że usuwamy jednostkę em z wartości line-height, tak, że arkusz stylów wygląda następująco:

ul {font-size: 15px; line-height: 1;}
li {font-size: 10px;}
small {font-size: 80%;}

Teraz przekazywana jest sama liczba, którą elementy potomne wykorzystują jako współczynnik skali — mnożnik, jeśli wolisz — a nie jako obliczony wynik.

Każdy element, który odziedziczy tę wartość 1 pomnoży ją przez obliczoną wartość font-size. Pierwszy element listy, który ma deklarację font-size: 10px, będzie miał obliczoną wartość line-height 10px. Następnie przekaże tę jedynkę do elementu small, który pomnoży ją przez swoją obliczoną wartość font-size. To da w wyniku 8 pikseli, a więc wysokość linii wyniesie również 8 pikseli.

Ostateczny wynik będzie równoważny z poniższym:

ul {font-size: 15px; line-height: 1;}
li {font-size: 10px; line-height: 10px;}
small {font-size: 80%; line-height: 8px;}

To duża różnica. Dlatego właśnie zaleca się, aby własności line-height nadawać wartości bez jednostek i stosować je do elementów typu html lub body albo jakiegokolwiek innego elementu, który będzie miał potomków.

Sprawę pogarsza fakt, że Walidator CSS ma błąd powodujący zgłaszanie błędów analizy składniowej przy napotkaniu wartości line-height bez jednostki (zobacz raport #2307). Z tego powodu otrzymywaliśmy sporo złośliwych e-maili na A List Apart, ponieważ walidator CSS wskazywał jako błędną użytą przeze mnie deklarację line-height: 1;. Jeffrey takich korespondentów odsyła do wspomnianego raportu o błędzie zwykle na tym kontakt się z nimi kończy.

Jeśli ktoś czytający te słowa poczuje motywację do naprawienia walidatora, to proszę to zrobić. Jak piszą w raporcie, potrzebna jest tylko łatka do wglądu dla właścicieli narzędzia. Mógłbym ją napisać gdybym miał czas. Może za rok albo dwa.

Powtórzę: własność line-height przyjmuje wartości bez jednostek i są one lepszym wyborem niż wartości z jednostkami w prawie każdej sytuacji. Jasne? Dziękuję.

[Uzupełnienie 26 sierpnia 06: Roger Johansson informuje o błędzie w starych przeglądarkach Gecko związanym z brakiem jednostki w wartościach własności line-height.