text-indent 속성의 이해

text-indent 속성은
텍스트 첫 줄의 들여쓰기 간격을 설정합니다.

  • 양수 값은 안쪽으로 들여쓰기가 되고,
  • 음수 값은 텍스트의 첫 줄을 바깥쪽으로 내어쓸 수 있습니다.
CSS 데모: text-indent 데모 버튼을 클릭해 보세요!

참고사항

text-indent 속성은 블록 컨테이너에만 적용됩니다. 인라인 컨테이너에는 적용되지 않습니다.

일반적으로 <div>나 <p>처럼 컨테이너 영역을 정의할 수 있는 요소에 적용 가능하며, <span>이나 <strong>처럼 컨테이너 영역을 정의할 수 없는 요소에는 적용되지 않습니다.

형식 구문

CSS 
selector {
    text-indent: <길이> | <백분율(%)>
}

구문

CSS 
/*  <길이> 값 */
text-indent: 0; /* 초깃값 */
text-indent: 20px;
text-indent: -20px;
text-indent: 1em;
text-indent: -2em;
text-indent: 1rem;
text-indent: -1rem;

/* <백분율(%)> 값 - 블록 컨터이너 너비에 대한 백분율 */
text-indent: 10%;
text-indent: -10%;

/* 전역 값 */
text-indent: inherit;
text-indent: initial;
text-indent: revert;
text-indent: revert-layer;
text-indent: unset;

값

text-indent 속성은 <길이> 단위 값, <백분율(%)> 단위 값을 사용할 수 있습니다.

음수 값도 허용됩니다.
음수 값은 텍스트의 첫 줄을 바깥쪽으로 내어쓸 수 있습니다.

알아두세요!
명세서에서는 text-indent 속성의 값으로 each-line와 hanging도 정의하고 있지만,
주요 브라우저에서 지원하지 않아, 여기에서는 다루지 않았습니다. 브라우저 호환성을 참조하세요.

<길이> 단위 값

텍스트 첫 줄의 들여쓰기 간격 크기의 값입니다. (양수, 0, 음수가 가능합니다.)

상대적 <길이> 단위
  • rem - 루트 요소인 <html> 요소의 font-size를 의미합니다. rem은 root em(element)을 나타냅니다.
  • em - 현재 요소의 font-size를 1em의 기준으로 합니다.
  • vh
  • vw
절대적 <길이> 단위
  • px
  • CSS에서 사용 가능한 절대적 길이 단위

<백분율(%)> 단위 값

블록 컨테이너의 너비에 대한 백분율로 정의합니다. (양수, 0, 음수가 가능합니다.)

형식 정의

text-transform 속성의 형식 정의
초깃값 0
적용 요소 블록 컨테이너
상속 예
애니메이션 예

예제

다음의 두 가지 예제를 통해 text-indent 속성의 적용되는 모습을 살펴보세요.

기본 들여쓰기

HTML 
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
CSS 
p {
    text-indent: 4em;
    background-color: #f2f2f2;
}
실제 적용된 모습

세로 쓰기 모드에서 text-indent

HTML 
<div class="vertical-text">
    세로쓰기 모드에서는
    첫 번째 줄이 오른쪽에서 왼쪽으로 내려가기 때문에,
    들여쓰기는 위쪽 방향으로 적용됩니다.
</div>
CSS 
.vertical-text {
    writing-mode: vertical-rl;
    text-indent: 2em;
    border: 1px solid #ccc;
    width: 200px;
    height: 150px;
    padding: 1em;
}

코드 부연설명
writing-mode 속성은 텍스트 줄을 가로 또는 세로로 배치할지 여부와 블록 컨테이너의 흐름이 되는 방향을 지정합니다.

실제 적용된 모습

direction: rtl에서 text-indent

HTML 
<p class="rtl-arabic" lang="ar" dir="rtl">
    هذا نص عربي تجريبي يستخدم لمحاكاة اتجاه الكتابة من اليمين إلى اليسار مع تطبيق المسافة البادئة على السطر الأول.
</p>
CSS 
.rtl-arabic {
    direction: rtl;
    text-align: right;
    text-indent: 2em;
    border: 1px solid #ccc;
    width: 200px;
    padding: 1em;
}

코드 부연설명
CSS의 direction 속성은 텍스트를 포함한 인라인 콘텐츠의 진행 방향을 설정하며, ltr(왼쪽 → 오른쪽) 또는rtl(오른쪽 → 왼쪽)로 지정할 수 있습니다.

실제 적용된 모습

마지막 업데이트 정보: 2025-05-15

text-indent 속성과 값에 대한 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
text-indent 1 12 1 3.5
each-line 지원하지 않음 지원하지 않음 121 15
hanging 지원하지 않음 지원하지 않음 121 15

명세서

text-indent 속성의 명세서 사양
명세서 사양
text-indent CSS Text Module Level 3
#text-indent-property

같이 보기