Ostatnio edytowany:

line-height

Autor: Virtual Patriot

Opis właściwości line-height

Za pomocą właściwości line-height możemy określić rozmiar wierszy interesującego nas elementu HTML.

Dla zaawansowanych

gdy element HTML posiada poziomy tryb zapisu treści, wtedy właściwość line-height określa rozmiar wysokości wierszy

gdy element HTML posiada pionowy tryb zapisu treści, wtedy właściwość line-height określa rozmiar szerokości wierszy

Dodatkowe techniczne informacje o właściwości line-height

przeznaczenie
  • element HTML każdego typu
dziedziczenie
  • tak
wartość initial
wyjątki initial
  • brak
animowanie
  • tak, lecz nie wartość normal

Interpretacja właściwości line-height

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis wartości właściwości line-height

normal

Opis

Wartość normal jest domyślną wartością właściwości line-height.

Domyślnie rozmiar wierszy elementu HTML określany jest automatycznie przez przeglądarkę internetową.

Przykład

rozmiar wysokości wierszy tego elementu "div" został automatycznie określony przez przeglądarkę internetową

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      rozmiar wysokości wierszy tego elementu "div" został automatycznie określony przez przeglądarkę internetową
    </div>

  </body>
</html>

liczba

Opis

Za pomocą właściwości line-height oraz dowolnej nieujemnej liczby możemy określić rozmiar wierszy interesującego nas elementu HTML.

Aby obliczyć ostateczną wartość właściwości "line-height" przeglądarka internetowa pomnoży podaną przez nas liczbę przez wartość właściwości font-size elementu HTML, którego rozmiar wierszy chcemy zmienić.

Przykład

rozmiar czcionki tekstu tego elementu "div" wynosi 20 pikseli, ponieważ do tego elementu "div" została dodana właściwość "font-size" wraz z wartością "20px", ponadto rozmiar wysokości wierszy tego elementu "div" wynosi 40 pikseli, ponieważ do tego elementu "div" została dodana właściwość "line-height" wraz z wartością "2", dzięki czemu przeglądarka internetowa obliczyła ostateczną wartość właściwości "line-height" na podstawie wyrażenia "2×20px"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        line-height:2;
        font-size:20px;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      rozmiar czcionki tekstu tego elementu "div" wynosi 20 pikseli, ponieważ do tego elementu "div" została dodana właściwość "font-size" wraz z wartością "20px", ponadto rozmiar wysokości wierszy tego elementu "div" wynosi 40 pikseli, ponieważ do tego elementu "div" została dodana właściwość "line-height" wraz z wartością "2", dzięki czemu przeglądarka internetowa obliczyła ostateczną wartość właściwości "line-height" na podstawie wyrażenia "2×20px"
    </div>

  </body>
</html>

rozmiar

Opis

Za pomocą właściwości line-height oraz dowolnej nieujemnej liczby wraz z wybraną jednostką absolutną lub jednostką relatywną lub za pomocą procentów możemy określić rozmiar wierszy interesującego nas elementu HTML.

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru czcionki tekstu elementu HTML, którego rozmiar wierszy chcemy zmienić

Przykład

rozmiar wysokości wierszy tego elementu "div" wynosi 40 pikseli, ponieważ do tego elementu "div" została dodana właściwość "line-height" wraz z wartością "40px"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        line-height:40px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      rozmiar wysokości wierszy tego elementu "div" wynosi 40 pikseli, ponieważ do tego elementu "div" została dodana właściwość "line-height" wraz z wartością "40px"
    </div>

  </body>
</html>