Jak zrobić wcięcie akapitu w HTML?

Aby zrobić wcięcie akapitu w HTML, należy posłużyć się właściwością CSS text-indent. Dzięki niej można w prosty sposób uzyskać efekt graficzny wcięcia – dokładnie taki, jaki znamy z tradycyjnych dokumentów tekstowych czy książek.

Podstawy — co to jest wcięcie akapitu?

Wcięcie akapitu to przesunięcie pierwszej linii tekstu akapitu w prawo względem lewego marginesu bloku tekstowego. Zastosowanie tego zabiegu poprawia czytelność długich tekstów, porządkuje treść i ułatwia odbiór nowego wątku lub myśli.

Standardowy HTML, czyli sam znacznik <p>, nie generuje wcięcia pierwszej linii, ale umożliwia jego wdrożenie za pomocą kaskadowych arkuszy stylów CSS.

Jak ustawić wcięcie akapitu w HTML?

Najprostszą i najczęściej stosowaną metodą jest użycie własności CSS text-indent. Możesz ustawić tę wartość dla każdego akapitu osobno lub dla wszystkich akapitów jednocześnie poprzez reguły CSS.

Przykład 1 — wcięcie 30 pikseli dla wszystkich akapitów

<style> p { text-indent: 30px; } </style>
<p>To jest akapit, którego pierwsza linia jest przesunięta o 30 pikseli w prawo względem marginesu.</p>
<p>Kolejny akapit również ma to samo wcięcie dzięki zastosowaniu globalnej reguły CSS.</p>

Przykład 2 — wcięcie z użyciem stylu w linii (inline)

Możesz też nadać wcięcie tylko wybranym akapitom, stosując atrybut style w znaczniku <p>:

<p style="text-indent: 1em;"> Ten akapit ma wcięcie o szerokości 1em (czyli szerokość znaku „M” wybraną czcionką). </p>
<p> Ten akapit nie ma wcięcia, bo nie ustawiono mu stylu. </p>

Przykład 3 — wcięcie w procentach

Wartość text-indent możesz definiować także jako procent szerokości elementu nadrzędnego:

<p style="text-indent: 5%;">Wcięcie wynosi dokładnie 5% szerokości akapitu. Przy szerokich blokach będzie to spore przesunięcie!</p>

Przykład 4 — różne jednostki wcięcia

text-indent akceptuje wiele jednostek: piksele (px), centymetry (cm), milimetry (mm), punkty (pt), em i rem, a także procenty.

p.e1 { text-indent: 2em; }
p.e2 { text-indent: 20px; }
p.e3 { text-indent: 1.5cm; }

<p class="e1">Pierwsza linia wcięta o 2em.</p>
<p class="e2">Pierwsza linia wcięta o 20px.</p>
<p class="e3">Pierwsza linia wcięta o 1,5cm.</p>

Dodatkowe praktyczne zastosowania

• Stylizacja konkretnej sekcji – możesz stworzyć specjalną klasę CSS (np. .wciecie) i przypisywać ją wybranym akapitom;
• Wcięcie nie tylko dla akapitów – właściwość text-indent działa na każdym elemencie blokowym, np. <div>, <li>;
• Łączenie z innymi stylami – często stosuje się jednocześnie wcięcie oraz powiększone marginesy czy odstęp między wierszami dla estetycznego wyglądu dłuższych tekstów.

Częste pytania

Jak zrobić wcięcie wszystkich wierszy, a nie tylko pierwszego?

Aby odsunąć wszystko (nie tylko pierwszy wiersz) – użyj właściwości margin-left zamiast text-indent.

p { margin-left: 30px; }

Czy można ustawić wcięcie na ujemną wartość?

Tak, text-indent dopuszcza wartości ujemne – wtedy pierwsza linia tekstu przesuwa się w lewo poza margines akapitu. Bywa to wykorzystywane np. do tworzenia tzw. „wiszącego wcięcia” (hanging indent).

p { text-indent: -20px; margin-left: 20px; }

Efekt: wszystkie linie oprócz pierwszej są przesunięte w prawo.

Podsumowanie

Zastosowanie CSS text-indent w HTML pozwala precyzyjnie kontrolować wcięcie pierwszej linii akapitu oraz podnieść czytelność tekstu na stronach internetowych. Za pomocą CSS możesz ustalić styl globalnie dla wszystkich akapitów lub dla wybranych fragmentów, a także stosować różne jednostki oraz łączyć wcięcie z innymi stylami typograficznymi.