CSS / Reference / text-indent

text-indent는 블록 안 첫 줄의 시작 위치를 이동해 들여쓰기나 내어쓰기를 만듭니다. 양수는 줄 안쪽으로, 음수는 바깥쪽으로 이동하며, 문단 전체의 여백을 바꾸는 padding과는 다릅니다.

문법과 주요 값

.intro { text-indent: 2em; }
.hanging { padding-inline-start: 2em; text-indent: -2em; }

값의 적용 범위와 문법은 MDN의 text-indent 문서에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 text-indent-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>text-indent 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 260px; border: 1px solid #718096; padding: 12px; }
.target { text-indent: 2em; }
.reference { padding-inline-start: 2em; text-indent: -2em; }
</style>
</head>
<body>
<main id="demo">
<h1>text-indent 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">들여쓰기 2em</p><div class="target">CSS 속성의 적용 결과를 비교합니다. 이 문장은 줄바꿈과 표시 영역을 확인하는 예시입니다.</div></div><div class="b"><p class="label">내어쓰기 -2em</p><div class="reference">CSS 속성의 적용 결과를 비교합니다. 이 문장은 줄바꿈과 표시 영역을 확인하는 예시입니다.</div></div></section>
</main>
</body>
</html>

첫 번째 문단은 첫 줄만 안으로 들어갑니다. 두 번째 문단은 시작 쪽 여백을 확보하고 첫 줄을 밖으로 당겨, 다음 줄과 다른 위치에서 시작합니다.

첫 줄과 문단 전체의 위치 구분

text-indent는 첫 번째 서식 줄을 이동하며 다음 줄의 시작 위치를 같은 방식으로 바꾸지 않습니다. 모든 줄에 공간이 필요하면 padding-inline-start를 사용합니다. 이 속성은 상속되므로 부모 문단의 들여쓰기가 자식 블록에 전달되는 경우도 확인해야 합니다.

음수 들여쓰기와 쓰기 방향

내어쓰기에는 이동 거리만큼의 여백을 함께 확보하는 편이 안전합니다. 여백 없이 큰 음수를 넣으면 글자가 화면 밖이나 인접 요소 위로 나갈 수 있습니다. 오른쪽에서 왼쪽으로 쓰는 문서까지 지원한다면 물리적인 padding-left보다 논리 속성을 검토하세요.

적용되지 않거나 예상과 다를 때

• 인라인 span에만 지정했다면 줄을 담는 블록에 적용했는지 확인합니다.
• 내어쓰기한 글자가 잘리면 상위 요소의 overflow와 시작 쪽 여백을 함께 확인합니다.

관련 설정을 함께 조정할 때는 문단 안의 내용 정렬은 text-align으로 지정을 참고하세요.