기준선 측정에서 선 높이, 여백 등 계산하기

Question

나는 노크 할 일련의 웹 페이지를 제공 받았고, 디자이너의 사양 중 하나는 글꼴의 기준선에서 세로로 측정 한 것 즉, 위의 블록에 대한 기준선은 50 픽셀이고 아래 블록은 30 픽셀입니다.

픽셀 단위로 글꼴 크기를 알면 누구나 위쪽 및 아래쪽 여백 (및/또는 선 높이 등)을 계산할 수있는 방법을 제안 할 수 있습니다.

Answer 1

라인 높이 CSS 속성은 숫자 값으로 설정할 수 있습니다. 따라서 계산 된 선 높이는 숫자 값 * 글꼴 크기입니다. 줄 높이를 1로 설정하면 줄 높이가 글꼴 크기와 같아집니다. 다음은 font-size를 사용한 예입니다. 20px

div { 
font-size: 20px; 
padding-bottom: 30px; 
padding-top: 30px; 
line-height: 1; 
}