CSS line-height

line-height: normal | length | number | percentage | initial | inherit

normal: 웹브라우저에서 정한 기본값. 보통 1.2 이다.

length: px, em 등 고정 수치로 할당 가능

number: 글자 크기의 몇 배인지로 줄 높이를 정함.

percentage: 글자 크기의 몇 %로 줄 놓이를 정함

initial: 기본값으로 설정

inherit: 부모 요소의 속성값을 상속받음.

 

number vs % 

: 자식 요소로 상속되었을 때의 계산 방식

number: 부모 요소의 숫자 값이 그대로 상속됨. 자식 요소에서 또 한 번 자식 요소의 font-size를 기준으로 계산된 값을 가짐.

%: 부모요소에서 %에 의해 이미 계산된 px 값이 상속됨

 

body{font-size: 20px; line-height: 2;} /*line-height = 40px*/
body{font-size: 20px; line-height: 200%;} /*line-height = 40px*/

 

하지만 자식 요소로 <p>가 있다고 생각하면 얘기가 달라짐

 

body{font-size: 20px; line-height: 2;} /*line-height = 40px*/
p{font-size: 10px;} /*line-height = 20px*/

body{font-size: 20px; line-height: 200%;} /*line-height = 40px*/
p{font-size: 10px;} /*line-height = 40px*/

 

숫자 값을 상속하므로 숫자 값을 사용하면 부모 엘리먼트에서 계산된 값 대신 비율을 그대로 상속받을 수 있으므로, 가능하면 단위가 없는 값을 사용하는 것이 좋습니다.