CSS text-indent Property

The text-indent property controls the horizontal offset of the first formatted line of a block container. It is commonly used to create the visual effect of a paragraph indent or a hanging indent: a positive offset shifts the first line inward from the block’s starting edge, while a negative offset pulls the first line outward so subsequent lines appear indented relative to it. Because it targets the first formatted line, it does not directly change the alignment or spacing of the rest of the lines in the block; their positions are determined by the normal line box flow and other layout properties.

When using text-indent you should be aware of interactions with the document’s inline direction and whitespace handling. The effective side that counts as the “start” depends on the element’s writing direction, so behavior will follow the element’s direction. Also, the way whitespace is preserved or collapsed can affect whether the visual indent appears where you expect — settings controlled by white-space influence how initial line breaks and leading spaces interact with the indentation. When combined with horizontal alignment choices, the indent can produce different visual results; for example, combining an indent with text-align that centers or right-aligns text requires careful consideration to keep the intended layout consistent.

The property applies to elements that generate a block box (or to the first formatted line of an inline block’s content), and it can be overridden or limited by other layout factors such as padding, margins, floats, or overflow/clipping. In vertical writing modes the offset will apply along the inline-start direction appropriate for that mode, so its perceptual effect differs from horizontal left-right indents. It also plays nicely with the ::first-line conceptually—because both target first-line presentation—though the pseudo-element is used to style properties on that line rather than to move it.

From a practical standpoint, designers use text-indent for typographic niceties like paragraph indents in long-form text, first-paragraph suppression in headings or lead paragraphs, and hanging indents for lists or citations. Be cautious with large negative offsets because they can push text outside the visible area or make content difficult to select or read, which can have accessibility and usability consequences. When precise layout is required across different writing modes and browsers, test how the indentation interacts with other layout settings (margins, padding, floats, overflow) to ensure the visual result matches your intent.