본문 바로가기

CSS

[CSS] font(5) - line-height

728x90
반응형

 

 

▶ line-height
  - 줄 높이를 지정.

 

 

[속성 값]
- normal: 브라우저의 기본 정의 사용. 1~1.4 브라우저마다 다를 수 있음. 기본값.
- 숫자: 요소 자체가 가지고 있는 글자 크기의 배수로 지정.  예) line-height: 2;라면 텍스트 크기의 2배.
  - 특정한 px 표기보다는 배수로 표기하는 것을 권장.
  - 일반적으로 권장하는 배수는 1.4 ~ 1.7

    - 폰트의 종류에 따라 차이가 있지만 1.4 ~ 1.7이 글자를 읽는 데 문제가 없다고 판단.
- 단위: px, cm, em 등
- %: 요소 자체 글자 크기의 비율로 지정.

 

- line-height는 첫 번째 줄과 두 번째 줄 사이의 간격이 아니라 첫 번째 줄의 높이, 두 번째 줄의 높이가 됨.
  예) font-size: 16px;일 때 line-height: 32px;라면 첫째 줄과 둘째 줄 사이의 간격은 32px이 아니라 16px이 됨.
  - line-height: 32px 중 font-size: 16px, 글자 위쪽 여백 8px, 아래쪽 여백 8px이 되는 것.

 

 

 

 

 

728x90
반응형

'CSS' 카테고리의 다른 글

[CSS] color  (0) 2020.09.09
[CSS] font(5) - font-family  (0) 2020.09.09
[CSS] font(4) - font-size  (0) 2020.09.09
[CSS] font(3) - font-weight  (0) 2020.09.09
[CSS] font(2) - font-style  (0) 2020.09.09