[CSS] line-height: 텍스트 라인의 높이

 

📌 line-height

: 텍스트 라인의 높이(텍스트 간의 간격)를 결정하는 속성

 

• line-height가 작을수록 텍스트 요소들은 서로 더 가깝게 배치된다.
• line-height가 클수록 텍스트 요소들은 더 멀리 떨어져서 배치된다.
• 값은 보통 단위를 빼고 사용 => 보통 1.2에서 1.5 사이의 값(1.2배, 1.5배)을 사용한다.
  절대 단위나 상대 단위를 사용해도 괜찮긴 함
  

 

 

* 텍스트의 line-height 값은 텍스트 요소의 글꼴 크기에 따라 상대적으로 조절된다.

p {
  font-size: 16px; /* 텍스트의 글꼴 크기를 16px로 설정 */
  line-height: 1.5; /* 텍스트 라인의 높이를 글꼴 크기의 1.5배로 설정 */
}

 

 

See the Pen Untitled by nadia kwon (@nadia-kwon) on CodePen.

 

---

참고

 

line-height - CSS: Cascading Style Sheets | MDN