글꼴 크기:0px의 이상한 동작 - CODE Q&A 해결 된 문제

Question

p에는 img 범위라는 두 가지 요소가 있습니다.

1. p에서 글꼴 크기:0px

설정 으아아아

car1.html로 저장하면 실행결과는 0.

2. p의 두 하위 요소에 글꼴 크기:0px

을 설정합니다. 으아아아

car2.html로 저장하면 실행 결과는 6px입니다.
이 동작을 어떻게 설명할까요?

Answer 1

img 태그의 글꼴 크기 효과입니다. img 요소를 둘러싸는 외부 레이어의 p 글꼴 크기가 클수록 아래쪽 여백도 커집니다. 인라인 요소로서 범위는 img만큼 높지 않으며 무시할 수 있습니다. e1과 e2의 높이 차이는 img와 p 사이의 공간입니다. (물론 테두리를 주석 처리해야 하며, p 글꼴 크기:0인 경우에만 e1-e2가 0이 될 수 있습니다.)

Answer 2

한 가지 지적: 사례 1은 2가 되어야 합니다

3점:
1 p의 높이는 line-height에서 지원됩니다. line-height撑起。
2.默认情况下，line-height为normal(1.1-1.2由浏览器决定)，又是由font-size决定
3.offsetHeight还包括border

所以，我们再来看：
情况1：在父元素p设置font-size:0;此时，span继承font-size:0,但border上下和2px，所以，p的offsetHeight=内容高度+border,内容高度=img的offsetHeight+span的2px，所以e1.offsetHeight-e2.offsetHeight=2才对
情况2：在子元素上分别设置font-size:0;img和span的情况和上述一样，但是p的font-size默认为16px;line-height2. 기본적으로 line-height는 normal(1.1-1.2는 브라우저에 의해 결정됨)이며 font-size결정

3.offsetHeight에는 테두리#🎜🎜#도 포함됩니다. #🎜🎜#그래서 다시 살펴보겠습니다. #🎜🎜#사례 1: 이때 상위 요소 p에 font-size:0를 설정합니다. code>spanfont-size:0을 상속하지만 border의 위쪽과 아래쪽은 2px이므로 offsetHeight=는 p 콘텐츠 높이 + 테두리, 콘텐츠 높이 = img의 offsetHeight + span 2px이므로 e1.offsetHeight-e2.offsetHeight=2가 정확합니다#🎜🎜#Case 2: font-size:0;img 설정 자식 요소에 각각 code> 및 span의 상황은 위와 동일하지만 p의 font-size는 기본적으로 16px;line-height 값은 브라우저에 의해 결정되므로 내용이 크게 변경되며 최종 값은 브라우저에 의해 결정됩니다. #🎜🎜#