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

Question

::before 의사 요소로 콘텐츠를 삽입하는 특정 행 높이의 블록이 있습니다.

으아아아

이거 정말 효과가 좋아요. 하지만 콘텐츠의 글꼴 크기도 더 작게 지정하면

으아아아

블록은 실제로 더 높아집니다. 왜 그런 겁니까?

으아아아 으아아아

윗줄은 글꼴 크기 변경이 없고, 아랫줄은 변경됩니다.

이제 가능한 해결책은 의사 요소의 line-height设置为0。或者到1em。或者甚至到 normal。那么发生了什么？通过将字体大小设置为 .6em 是否将 line-height을 이상한 값으로 설정하는 것입니다. 왜?

PS 중복된 것처럼 보일 수도 있지만(오른쪽 목록 참조) 지금까지 읽은 답변 중 line-height:normal 설정이 왜 효과가 있는지 설명하는 답변은 없습니다. 행 높이를 암시적으로 더 큰 값으로 설정하려면 뭔가 발생해야 합니다. 이것이 내가 알고 싶은 것입니다.

Answer 1

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

---

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

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

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

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

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

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

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

Answer 2

.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 더 큽니다.