글꼴 크기를 줄이면 어떻게 높이가 늘어나나요?

Question

::before 의사 요소를 사용하여 콘텐츠를 삽입하는 특정 줄 높이의 블록이 있습니다. .block::before{content:'textthere';} 이것은 잘 작동합니다. 그러나 콘텐츠에 더 작은 글꼴 크기 .block::before{font-size:.6em;content:'textthere';} 를 부여하면 블록이 실제로 더 커집니다. 왜 그런 겁니까? .container{display:inline-block;}.lo

P粉714844743 · Answer

편집: 이 질문은 최근에 많은 새로운 관심을 받았기 때문에 더 유용하도록 업데이트되었습니다.

Alohci의 솔루션은 정확하지만 그래픽에 더 관심이 있는 사람에게는 완전히 명확하지 않을 수 있습니다.

그래서 사진으로 해결책을 명확히 설명해주세요.

첫째, 줄 높이는 계산된 크기를 상속하므로 em 单位指定的，但子级将继承以像素为单位的值。例如，如果字体大小为 20px 且行高为 3em로 시작하더라도 줄 높이는 60픽셀이 됩니다. 글꼴 크기가 다른 하위 항목에 대해서도(자체 줄 높이를 지정하지 않는 한).

이제 글꼴에 1/4 디센더가 있다고 가정해 보겠습니다. 즉, 20px 글꼴을 사용하는 경우 디센더는 5픽셀이고 어센더는 15픽셀입니다. 그런 다음 아래와 같이 나머지 선 높이(이 경우 40픽셀)를 기준선 위와 아래로 동일하게 나눕니다.

글꼴이 더 작은 블록(0.6em 또는 12픽셀)의 경우 줄 높이의 남은 양은 60-12 또는 48픽셀이며, 이는 기준선 위 24픽셀, 아래 24픽셀로 균등하게 나뉩니다.

그런 다음 동일한 기준선에서 두 글꼴을 결합하면 줄 높이가 같은 방식으로 나누어지지 않으므로 두 줄 높이가 모두 60픽셀이더라도 포함 블록의 전체 높이가 증가하는 것을 볼 수 있습니다.

이것이 모든 것을 설명해주기를 바랍니다!

P粉470645222 · Answer

.lorem, .ipsum, .dolor 및 .sit 상자의 높이는 포함된 단일 줄 상자의 높이입니다.

각 줄 상자의 높이는 줄의 기둥 기준선 위 높이와 해당 줄의 텍스트 + 기준선 아래 최대 높이의 최대값입니다. 기둥과 텍스트가 기준선에 정렬되기 때문입니다.

명확하게 설명하자면, 아래의 높이(em 단위)는 전체 컨테이너(즉, 본문 요소)의 글꼴 크기를 나타냅니다.

.ipsum(글꼴 크기 1em)에서 기둥과 텍스트의 기준선 위 높이는 1em(상단 절반 행간) + 13/16em(라이저, 대략), 기준선 아래 높이는 1em(행간 반 행) + 3 /16em( 하강 부분 약) + 1em(라인 하단 절반 전), 총 3em.

.sit(글꼴 크기 0.6em)에서 기준선 위 높이는 [1em(상반부 선행) + 13/16em(상승 부분, 대략 기둥)] 및 [1.2]em(상반부 선행)의 최대값입니다. ) + 0.6 x 13/16em(상승 부분, 약)], 기준선 아래 높이는 스트럿의 경우 [1em(하부 선두) + 3/16em(상승 부분, 약) 하강 부분 최대값, 약)입니다. ] 및 [텍스트의 경우 1.2em(하단 선행) + 0.6 x 3/16em(내림차순 부분, 대략)]입니다.

이를 평가하고 소수로 변환하면 기준선 위 1.8125em, 기준선 아래 1.3125em, 총 3.125em이 되며 이는 .ipsum보다 3em 더 큽니다.