CSS 강좌 | Property > text-indent

개요

text-indent로 들여쓰기 또는 내어쓰기를 할 수 있습니다.

  • 기본값 : 0
  • 상속 : Yes
  • 애니메이션 : Yes
  • 버전 : CSS Level 1

문법

text-indent: length | initial | inherit;
  • length : 길이값을 넣습니다. 양수면 들여쓰기, 음수면 내어쓰기가 됩니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

값을 음수로 정하여 내어쓰기를 하면 내어쓴 부분이 가시 영역을 벗어날 수 있습니다. 이 때 margin 또는 padding으로 여백을 조정합니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      .a {
        text-indent: 2em;
      }
      .b {
        text-indent: -2em;
      }
      .c {
        text-indent: -2em;
        margin-left: 2em;
      }
    </style>
  </head>
  <body>
    <p class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo.</p>
    <p class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo.</p>
    <p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo.</p>
  </body>
</html>

브라우저 지원

  • Chrome : 1.0+
  • Firefox : 1.0+
  • Internet Explorer : 3.0+
  • Opera : 3.5+
  • Safari : 1.0+
Category

Created on 2014-10-12 03:50 | Updated on 2017-04-24 09:01

이 글을 공유하기

Kakao

Book navigation