[CSS] line-height 란?

line-height란 행간을 의미합니다. 행간이란 무엇이냐

 

행간(leading)은 각 글줄들 사이에 적절한 공간이라 할 수 있습니다.

이러한 행간과 같은 표현을 CSS에서는 line-height 를 사용하여 글줄 사이의 수직 여백을 조정할 수 있습니다.

 

간단하게 코드부터 살펴볼까요?

/* 1. normal 값 사용 */
p { line-height: normal; }

/* 2. inherit(상속)값 사용 */ 
p { line-height: inherit; }

/* 3. 퍼센트값 사용 */ 
p { line-height: 120%; }

/* 4. 길이 단위 값(px, em 등) 사용 */ 
p { line-height: 20px; }
p { line-height: 20em; }

/* 5. 숫자 값(단위 표기가 없는) 사용 */ 
p { line-height: 1.2; }

이렇게 볼 수 있습니다.

 

각 항목에 대하여 조금더 살펴볼까요?

 

1. normal 사용

normal은 그냥 기복적인 높이 입니다. 이때의 line-height의 값은 브라우저마다 조금씩 다릅니다.

 

2. inherit 사용

부모의 line-height를 받아와 사용합니다.

 

3. 퍼센트 사용

퍼센트는 기본적으로 font-size의 값으로 계산됩니다. 만약 150%를 적용하고 font-size가 10px일때

line-height는 15px이라 할 수 있습니다.

 

4. px, em 길이 단위 사용

이 경우는 단위대로 적용되기 때문에 특별히 설명할 부분은 없습니다.

 

5. 숫자만 사용

이는 퍼센트와 같은 방식으로 계산이 됩니다. 퍼센트로 적을때는 150%라고 적었다면 숫자로만 표현을 하면

1.5 라고 적을 수 있는 것이죠

 

 

어떤 방법을 사용하든 자신에게 맞는 방법을 사용하시면 될거같아요!