Ostatnio edytowany:

text-indent

Autor: Virtual Patriot

Opis właściwości text-indent

Za pomocą właściwości text-indent możemy określić rozmiar wcięcia w pierwszym wierszu tekstu interesującego nas elementu HTML.

Dla zaawansowanych

gdy element HTML posiada poziomy tryb zapisu treści, wtedy właściwość text-indent określa rozmiar szerokości wcięcia

gdy element HTML posiada pionowy tryb zapisu treści, wtedy właściwość text-indent określa rozmiar wysokości wcięcia

Dodatkowe techniczne informacje o właściwości text-indent

przeznaczenie
dziedziczenie
  • tak
wartość initial
  • 0
wyjątki initial
  • brak
animowanie
  • tak

Interpretacja właściwości text-indent

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis wartości właściwości text-indent

rozmiar

Opis

Za pomocą właściwości text-indent oraz dowolnej liczby wraz z wybraną jednostką absolutną lub jednostką relatywną lub za pomocą procentów możemy określić rozmiar wcięcia w pierwszym wierszu tekstu interesującego nas elementu HTML.

Wartości dodatnie

wartości dodatnie tworzą wcięcie wewnątrz obszaru zawartości elementu HTML względem tej krawędzi obszaru zawartości elementu HTML, od której rozpoczęło się pisanie tekstu elementu HTML

Wartości ujemne

wartości ujemne tworzą wcięcie na zewnątrz obszaru zawartości elementu HTML względem tej krawędzi obszaru zawartości elementu HTML, od której rozpoczęło się pisanie tekstu elementu HTML

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru szerokości obszaru zawartości najbliższego elementu przodka tworzącego blok treści

Dla zaawansowanych

jeżeli chcemy zmienić krawędź, od której powinno rozpocząć się pisanie tekstu elementu HTML, wtedy należy skorzystać z właściwości direction lub właściwości writing-mode lub obu właściwości naraz

zasada dotycząca najbliższego elementu przodka tworzącego blok treści jest prawdziwa tylko wtedy, gdy element HTML, do którego chcemy dodać właściwość text-indent wraz z wartością wyrażona za pomocą procentów posiada pozycję static lub pozycję relative (dla pozostałych typów pozycji należy zapoznać się dokładniej z poszczególnymi wartościami właściwości position)

wartości procentowe tak naprawdę liczone są względem aktualnego rozmiaru szerokości logicznej

Przykład

rozmiar szerokości wcięcia w pierwszym wierszu tekstu tego elementu "div" wynosi 30 pikseli, ponieważ do tego elementu "div" została dodana właściwość "text-indent" wraz z wartością "30px"

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 {
        text-indent:30px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      rozmiar szerokości wcięcia w pierwszym wierszu tekstu tego elementu "div" wynosi 30 pikseli, ponieważ do tego elementu "div" została dodana właściwość "text-indent" wraz z wartością "30px"
    </div>

  </body>
</html>