[CSS] 글 들여쓰기 text-indent

text-indent

text-indent 속성은 들여쓰기를 해주는 효과를 줍니다. 문단의 첫번째 줄에 지정한 만큼 들여쓰기를 해줍니다.

연습소스

css

div {
  width: 200px;
  border: 1px solid red;
}

#div_1 {
  text-indent: 20px;
}

#div_2 {
  text-indent: -10px;
}

html

<div>우리 한때 자석 같았다는 건 한쪽만 등을 돌리면 멀어진다는 거였네.
가진 게 없던 내게 네가 준 상처 덕분에 나도 주인공이 돼보네 in a sad love story.</div>
<div id="div_1">우리 한때 자석 같았다는 건 한쪽만 등을 돌리면 멀어진다는 거였네.
가진 게 없던 내게 네가 준 상처 덕분에 나도 주인공이 돼보네 in a sad love story.</div>
<div id="div_2">우리 한때 자석 같았다는 건 한쪽만 등을 돌리면 멀어진다는 거였네.
가진 게 없던 내게 네가 준 상처 덕분에 나도 주인공이 돼보네 in a sad love story.</div>

https://jsfiddle.net/chjs7290/m671hbuc/

https://www.w3schools.com/cssref/pr_text_text-indent.asp