line-height w CSS3

By /

CSS

Właściwość line-height w CSS jest fundamentalnym narzędziem do kontrolowania wertykalnego rytmu tekstu w projektach webowych. Umożliwia ona ustalenie wysokości linii tekstu, co bezpośrednio wpływa na czytelność, estetykę i ogólną przestrzeń tekstu na stronie. W CSS3, line-height może być określone jako stała wartość (np. w pikselach), procentowo, lub bez jednostki, co pozwala na elastyczne dostosowanie do różnych rozmiarów fontów i kontekstów layoutowych.

Przykład użycia line-height

W poniższym przykładzie przedstawiono prosty dokument HTML z zastosowaniem różnych wartości line-height dla tekstu wewnątrz paragrafów.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład wykorzystania line-height w CSS3</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .default {
            line-height: normal;
        }
        .fixed {
            line-height: 20px;
        }
        .percentage {
            line-height: 150%;
        }
        .unitless {
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <p class="default">To jest paragraf z domyślnym line-height.</p>
    <p class="fixed">To jest paragraf z ustaloną wartością line-height 20px.</p>
    <p class="percentage">To jest paragraf z line-height ustawionym na 150%.</p>
    <p class="unitless">To jest paragraf z line-height bez jednostki, ustawiony na 1.5.</p>
</body>
</html>

Jak działa line-height

  • Domyślna: Ustawienie line-height: normal; pozwala przeglądarce na wybór standardowej wysokości linii, która jest zazwyczaj 1.2 do 1.4 raza większa niż rozmiar fontu, w zależności od przeglądarki i fontu.
  • Stała wartość: Ustawienie line-height z konkretną wartością (np. 20px) definiuje stałą wysokość linii, niezależnie od rozmiaru fontu.
  • Procentowa: Wartość procentowa line-height (np. 150%) ustala wysokość linii jako procent rozmiaru fontu elementu.
  • Bez jednostki: Ustawienie line-height bez jednostki (np. 1.5) jest zalecane, ponieważ pozwala na zachowanie proporcji wysokości linii do rozmiaru fontu, nawet gdy font jest dziedziczony przez elementy potomne.

Podsumowanie

Właściwość line-height jest kluczowa dla tworzenia dobrze zaprojektowanych, czytelnych stron internetowych. Pozwala na kontrolę przestrzeni między liniami tekstu, co ma znaczący wpływ na ogólną legibility i estetykę treści. Używając line-height, deweloperzy mają możliwość fine-tuning przestrzeni tekstu, co jest szczególnie ważne w projektowaniu responsywnym, gdzie tekst musi być czytelny na różnych urządzeniach i rozmiarach ekranu. Wybór metody ustawienia line-height zależy od konkretnego zastosowania i pożądanego efektu wizualnego, jednak często zaleca się stosowanie wartości bez jednostki dla większej elastyczności i lepszego skalowania.

 

 

Powiązane artykuły

Scroll to Top