먼저 line-height는 글자가 한 줄에서 차지하는 높이를 말합니다. line-height가 10px이라고 한다면

한 줄에서 글자가 폰트 크기를 포함하여 총 10px의 높이를 차지한다는 걸 의미하게 됩니다.

 

 

위 그림을 보시면 ABC와 맞닿아 있는 위, 아래의 선을 제외하고 두 공간이 있습니다. 이 공간들을 leading 영역이라고 합니다.

 

line-height를 증가시키면, 이 leading 영역만 위 아래로 동등하게 늘어나게 됩니다. 대신 텍스트는 가운데에 그대로 위치합니다. 이게 line-height를 이용하여 수직 정렬을 시키는 주된 원리입니다.

 

가령 height가 50px인 박스모델이 있다고 했을 때 10px의 ABC와 BCD라는 글자가 있다고 생각해보겠습니다.

line-height는 기본값이 normal인데 폰트마다 차이는 있지만 leading영역이 조금씩 주어져있습니다.

ABC와 BCD는 각각 그 normal에 해당하는 line-height 수치만큼의 높이에서 아래처럼 자신들만 위치하고 있게 되는거죠.

-----------------

ABCBCD

 

-----------------

만약 ABC의 line-height를 50px로 증가시킨다면 ABC라는 글자가 한 줄에서 50px의 높이를 차지하게 됩니다.

다시 말하면 height 50px 내에서는 ABC라는 글자만 있어야 합니다.

 

line-height는 글자와 글자사이의 줄간격이니 위에서부터 아래로 50px의 높이까지는 ABC라는 글자만 있고

BCD는 50px 밖에 있게 되는겁니다. 여기서 폰트크기가 10px이었으니 line-height가 50px 이라고 한다면 폰트는 가운데 그대로 있고 위 아래로 동등하게 늘어나게 되어 20px씩 각각 leading 영역이 늘어나서

10px + 20px + 20px = 50px의 line-height가 완성되는거죠.

 

그래서 height 50px 내에서 가운데에 10px의 폰트가 있게 되고 균등하게 늘어난 각 20px의 leading 영역에는 폰트가 존재할 수 없기 때문에 수직 정렬이 되게 됩니다.

-----------------

 

ABC

 

-----------------

BCD

 

[출처] https://www.codeit.kr