text-indent

평소에 사용을 잘안해서 포스팅 해두려고 한다. 들여쓰기와 내어쓰기를 할때 사용한다.

 

• 값이 양수면 들여쓰기, 값이 음수면 내어쓰기이다.
• 디폴트는 0입니다.
• 내어쓰기를 할 때는 왼쪽패딩을 조절해주면 좋다.

html

<div class="sample1">
<h1>sample1</h1>
 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 Lorem Ipsum has been the industry's standard dummy text ever since the
 1500s, when an unknown printer took a galley of type and scrambled it to
 make a type specimen book. It has survived not only five centuries, but
 also the leap into electronic typesetting, remaining essentially
 unchanged. It was popularised in the 1960s with the release of Letraset
 sheets containing Lorem Ipsum passages, and more recently with desktop
 publishing software like Aldus PageMaker including versions of Lorem
 Ipsum.
</div>

<div class="sample2">
 <h1>sample2</h1>
 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 Lorem Ipsum has been the industry's standard dummy text ever since the
 1500s, when an unknown printer took a galley of type and scrambled it to
 make a type specimen book. It has survived not only five centuries, but
 also the leap into electronic typesetting, remaining essentially
 unchanged. It was popularised in the 1960s with the release of Letraset
 sheets containing Lorem Ipsum passages, and more recently with desktop
 publishing software like Aldus PageMaker including versions of Lorem
 Ipsum.
</div>

<div class="sample3">
 <h1>sample3</h1>
 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 Lorem Ipsum has been the industry's standard dummy text ever since the
 1500s, when an unknown printer took a galley of type and scrambled it to
 make a type specimen book. It has survived not only five centuries, but
 also the leap into electronic typesetting, remaining essentially
 unchanged. It was popularised in the 1960s with the release of Letraset
 sheets containing Lorem Ipsum passages, and more recently with desktop
 publishing software like Aldus PageMaker including versions of Lorem
 Ipsum.
</div>

 

css

div {
  font-size: 30px;
  margin: 50px 0;
}

.sample1 {
  text-indent: 2em;
}

.sample2 {
  text-indent: -2em;
}

.sample3 {
  text-indent: -2em;
  margin-left: 2em;
}

 

result

 

 

몇몇 상황에서 유용하게 사용가능 할거같다.