CSS / Reference / text-indent

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

문법과 주요 값

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

.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; }

/* 좁은 화면에서 실습 외곽을 맞춥니다. */
.target { max-width: calc(100vw - 48px - 26px); }
.reference { max-width: calc(100vw - 48px - 2em - 14px); }
</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보다 논리 속성을 검토하세요.

한 가지 설정씩 바꾸어 확인하기

앞의 전체 코드를 저장한 예제 파일을 사용합니다. 지정한 선택자의 CSS만 변경하고, 서로 다른 비교 조건을 한꺼번에 바꾸지 않습니다.

1. 기존 파일의 .target에서 text-indent만 0, 2em, -2em 순서로 바꾸어 첫 줄과 둘째 줄을 비교합니다. 다른 padding은 그대로 둡니다.
2. 내어쓰기를 실제 문단에 쓸 때는 .reference처럼 시작 여백을 확보하고, 실습 후 각 값을 원래대로 복구합니다. 320px에서도 글자와 박스가 잘리지 않는지 확인합니다.

padding만 쓰는 결과는 앞 파일의 .reference에서 text-indent만 0으로 바꾸어 비교합니다. 기존 시작 padding을 유지하면 첫 줄과 나머지 줄이 모두 같은 시작점으로 이동합니다. 확인 후 -2em로 복구하세요.

문자 크기·줄 높이·서체를 함께 조정하려면 글꼴, 글자 크기, 굵기, 줄 간격 설정하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 text-align입니다.

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

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