CSS text-indent

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

CSS text-indent

Właściwość text-indent służy do ustawiania wcięcia pierwszej linii tekstu w elemencie blokowym, np. w akapicie <p>. Jest często używana do uzyskania efektu wcięcia akapitowego znanego z edytorów tekstu i publikacji drukowanych.

Składnia

p {
  text-indent: 30px;
}

Taki zapis oznacza, że pierwsza linia każdego akapitu zostanie przesunięta o 30px w prawo.

Typowe wartości

Właściwość text-indent może przyjmować różne jednostki CSS, np.:

  • px — piksele, np. 30px,
  • em — jednostka zależna od rozmiaru czcionki, np. 2em,
  • % — procent szerokości elementu, np. 10%.

Przykład:

p {
  text-indent: 2em;
}

Wcięcie wyniesie dwukrotność aktualnego rozmiaru czcionki.

Czego nie mylić z text-indent?

  • line-height ustawia wysokość wiersza, a nie wcięcie.
  • letter-spacing ustawia odstępy między literami.
  • word-spacing ustawia odstępy między wyrazami.
  • line-indent i text-spacing nie są standardowymi właściwościami CSS do wcięcia pierwszej linii.

Przykład HTML i CSS

<p>To jest akapit, którego pierwsza linia będzie wcięta.</p>

p {
  text-indent: 30px;
}

Na egzaminie INF.03 należy zapamiętać, że do wcięcia pierwszej linii tekstu służy dokładnie właściwość text-indent.