선 높이 사용시 블록 요소 정렬 위로

Question

line-height을 블록 요소에 h1과 같이 지정하면 각 텍스트 행 위와 아래에 공백이 추가되므로 요소가 동일한 상단 위치에서 시작하지 않습니다 . 각 줄 아래에 공백을 넣으려면 어떻게해야합니까? vertical-align은 인라인 요소과 만 작동합니다.

p 태그와 같은 블록 요소의 텍스트가 기본적으로 줄 높이 "normal"로 맨 위에 있지 않음을 알고있었습니다. 요소에 배경색을 추가하면 색상이 텍스트 위 몇 픽셀까지 보입니다. 왜?

Answer 1

TLDR : position: relative을 사용하고 가짜 상위 값을 사용하여 가짜로 만듭니다.

설명 : 네 말이 맞아. 선 높이는 항상 각 문자 위아래에 추가됩니다. 글꼴 크기가 12px이고 행 높이가 18px 인 경우 각 '줄'보다 3px 위와 3px가됩니다. 각 3 픽셀 공간을 '절반 유도'라고합니다.

그러나 위의 값이 음수 인 position: relative을 사용하면 각 줄 아래에 공백이 추가 된 것처럼 보일 수 있습니다.

위 예제의 6px 대신에 각 행 사이에 8px 공간 (18px/12px = 6px = 상단 3px + 하단 3px)이 필요하다고 가정 해 보겠습니다. 이렇게하려면 줄 높이를 18px에서 20px로 높이면 절반 높이의 4px가되고 줄 사이에 총 8px 공간이 생깁니다. 그런 다음 position: relative; top: -2px을 추가하여 선 높이가 18px 일 때와 같은 위치로 선을 다시 범프하십시오.

브라우저가 여전히 각 행의 위와 아래에 4px 공간을 추가하더라도 부정적인 세로 위치로 인해 여분의 맨 위 간격이 잘린 것처럼 보입니다.