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`.