[css] line-height

개념

문자간 줄 사이에 간격을 설정

block 요소에 설정하면 자식 inline 요소에 최소 줄 높이가 결정된다. 

 

팁

픽셀단위로 설정하면 나중에 폰트 크기가 변경될 경우 유지보수하기 번거로움

보통 상수로 표현 ex) 1.5

 

예제) 1.5와 1.5em의 차이

em은 설정한 요소의 폰트 크기에 따라 조절 되므로 자식 요소에게 상속될 수 있음으로 단위 없이 작성하는게 바람직 하다

 

See the Pen Untitled by Daewoong Kim (@daewoong-kim) on CodePen.

 

 

line-height를 1로 설정함으로써 각 요소의 폰트 크기만큼 설정하게 됨

.parent {
  font-size: 20px;
  line-height: 1;
}

 

 

 

https://www.youtube.com/watch?v=SDa7f8os2WA