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 wysokości wierszy interesującego nas elementu HTML.

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

przeznaczenie

element HTML każdego typu

dziedziczenie

tak

wartość initial

normal

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 wysokości wierszy elementu HTML określany jest automatycznie przez przeglądarkę internetową.

Przykład

  line-height:normal;
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:#CBFFFF;
      }
    </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 wysokości 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 wysokości wierszy chcemy określić.

Przykład

  line-height:2;
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:#CBFFFF;
      }
    </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 wysokości 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 wysokości wierszy chcemy określić

Przykład

  line-height:40px;
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:#CBFFFF;
      }
    </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>