CSS 데모: text-indent 데모 버튼을 클릭해 보세요!
selector {
    text-indent: <길이> | <백분율(%)>
}
/*  <길이> 값 */
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;
<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>
p {
    text-indent: 4em;
    background-color: #f2f2f2;
}
실제 적용된 모습
<div class="vertical-text">
    세로쓰기 모드에서는
    첫 번째 줄이 오른쪽에서 왼쪽으로 내려가기 때문에,
    들여쓰기는 위쪽 방향으로 적용됩니다.
</div>
.vertical-text {
    writing-mode: vertical-rl;
    text-indent: 2em;
    border: 1px solid #ccc;
    width: 200px;
    height: 150px;
    padding: 1em;
}
실제 적용된 모습
<p class="rtl-arabic" lang="ar" dir="rtl">
    هذا نص عربي تجريبي يستخدم لمحاكاة اتجاه الكتابة من اليمين إلى اليسار مع تطبيق المسافة البادئة على السطر الأول.
</p>
.rtl-arabic {
    direction: rtl;
    text-align: right;
    text-indent: 2em;
    border: 1px solid #ccc;
    width: 200px;
    padding: 1em;
}
실제 적용된 모습

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