line-height bez jednostek

Question

Widziałem ludzi przy użyciu wysokość wiersza bez podania jednostki, tak: line-height: 1.5;

Co oznacza liczba reprezentuje? Zgaduję, że jest to stosunek, tak jak to jest em?

Answer 1

line-height@ Mozilla Developer Network ma bardzo dobre objaśnienie (i przykłady), które jest łatwiejsze do zrozumienia w porównaniu do line-heightCSS specification.

line-height może mieć wartość określoną w jeden z następujących sposobów

line-height: normal | <number> | <length> | <percentage> 

W twoim przypadku, używasz <number> która jest opisana jako:

Zastosowana wartość ta niemianowana <number> pomnożone przez rozmiar czcionki elementu. Obliczona wartość jest taka sama jak podana <number>. W większości przypadków jest to preferowany sposób ustawiania wysokości linii bez niespodziewanych wyników w przypadku dziedziczenia.

Answer 2

Zobacz respective spec @W3C:

Zastosowana wartość nieruchomości jest ta liczba pomnożona przez wielkość czcionki elementu. Wartości ujemne są nielegalne. Obliczona wartość jest taka sama jak określona wartość.

Tak jak się domyślacie, jest to stosunek i odnosi się do obecnego font-size.

Answer 3

line-height: X; zasadniczo przekłada się line-height: (X*100)%;

line-height: 1; jest taka sama jak line-height: 100%;

Podobnie,

line-height: 1.5; jest taki sam jak line-height: 150%;

---

przypadku line-height: X%; oznacza X% linii wysokości aktualnie ustawionej czcionki i rozmiaru dla elementu.

Na przykład, jeśli wysokość wiersza dla elementu zgodnie z bieżącą ustawioną czcionką i rozmiarem wynosi 24px, line-height: 150% będzie miała wysokość linii 36px. I tak dalej ..

Answer 4

Tak, jest to stosunek: 1,5 oznacza 1,5 razy rozmiar czcionki elementu. Oznacza to tak samo jak 1.5em lub 150%, ale z jednym ważnym wyjątkiem: w dziedziczeniu, gdy używana jest czysta liczba, liczba jest dziedziczona, a nie obliczona wartość.

Jeśli masz element o rozmiarze czcionki 24pt, line-height: 1.5 ustawia wysokość linii na 36 punktów. Ale jeśli element ma element potomny, tj. Element wewnętrzny, o rozmiarze czcionki 10 punktów i bez ustawionej wysokości linii, wówczas element potomny dziedziczy wartość line-height, co oznacza 15 punktów dla tego elementu.Jeśli, z drugiej strony, wysokość linii zostałaby ustawiona na 1.5em lub 150%, wówczas element potomny odziedziczyłby obliczoną wartość 36 punktów, tworząc groteskowe odstępy między wierszami. To jest ukryte pod formulation, które mówi. dla czystej liczby użytej jako wartość line-height: "Obliczona wartość jest taka sama jak określona wartość." Zatem, nominalnie, dziecko dziedziczy wartość "wyliczoną" 1,5, która będzie następnie interpretowana w kontekście dziecka (1,5 razy jego rozmiar czcionki).

Answer 5

Można również użyć rem, aby użyć rozmiaru emota root zamiast aktualnego rozmiaru czcionki.

To są zarówno wysokość linia dwukrotność obecnej font-size

font-size: 2em; 
font-size: 2; 

Ale to jest wysokość linii dwukrotnej wielkości czcionki ROOT

font-size: 2rem;