Design Atlas
한국어
Aa Typography

Hanging indent

행잉 인덴트

A paragraph style where the first line sits flush left and every line after it is indented instead — the reverse of ordinary indentation.

Also known as: 내어쓰기Hanging indentation
···
html
<div class="stage">
  <p class="entry"><span class="label">Bass, S. (1960).</span> Saul Bass on title sequences and the beginnings of kinetic typography in American film design practice.</p>
  <div class="readout" id="readout">확인 중…</div>
</div>
css
.stage{width:min(92%,420px)}
.entry{font-size:12px;line-height:1.6;color:var(--fg);margin:0;font-family:Georgia,'Times New Roman',serif;text-indent:-1.4em;padding-left:1.4em}
.label{font-weight:700}
.readout{margin-top:14px;font:10px ui-monospace,Menlo,monospace;color:var(--muted);text-align:center}
js
const readout = document.getElementById('readout');
const supported = CSS.supports('text-indent', '3em hanging');
readout.textContent = supported
  ? 'CSS.supports("text-indent: 3em hanging") = true — 신형 키워드 지원됨 (데모는 호환성 위해 고전 방식 사용)'
  : 'CSS.supports("text-indent: 3em hanging") = false — 이 브라우저는 신형 키워드 미지원, 음수 인덴트 방식만 동작';

Where ordinary indentation signals "a new paragraph starts here," a hanging indent shows "how far this entry runs." In structures like bibliography entries, dictionary headwords, or numbered legal clauses — a short "label" (author name, headword, clause number) followed by longer running text — pinning the label's first line to the left and indenting the continuation lines visually separates label from body.

The classic CSS technique gives `text-indent` a negative value and adds the same amount back as `padding-left` (or `margin-left`): `text-indent: -1.5em; padding-left: 1.5em;`. Only the first line is affected by `text-indent`, so it gets pulled left, while every other line stays indented by the padding.

The newer `text-indent: 3em hanging` syntax states the intent explicitly but has uneven browser support. The demo checks live with `CSS.supports` whether this newer keyword actually works here, and regardless of the result, shows the visual using the classic negative-indent technique, which works everywhere.

When to use

Use for repeating "short label + long content" structures — bibliographies, glossaries, numbered lists. Not needed for ordinary body paragraphs.