앵커 태그 아래 신비한 공백

당황스러울 정도로 구체적인 레이아웃 수수께끼에서 이미지를 둘러싸는 앵커 태그는 설명할 수 없는 높이 차이를 보여 바닥에 보기 흉한 간격이 있습니다. 여백과 패딩을 모두 0으로 설정했음에도 불구하고 태그는 의도한 경계보다 높게 유지되어 원하는 미학을 방해합니다.

당황스러운 프로그래머는 명확성을 추구합니다

이 수수께끼에 대한 답 찾기 수수께끼, 코더들은 FireFox와 Chrome 모두에 문의했지만 동일한 어리둥절한 결과를 얻었습니다. 이 원치 않는 공간의 원인은 여전히 ​​파악되지 않으며 개발자는 머리를 긁적입니다.

하강 공개

자세히 살펴보면 이미지가 인라인으로 렌더링된다는 것이 분명해집니다. 텍스트 문자와 비슷하게 동작하게 만듭니다. 이렇게 배치하면 이미지가 기준선에 배치되어 하강기 공간으로 알려진 분리가 생성됩니다. 디센더는 "j", "g", "y", "p"와 같은 소문자의 길쭉한 부분입니다.

수직 복원됨

이 문제를 해결하려면 , CSS 조정이 필요합니다. 이미지에 "수직 정렬: 하단"을 적용하면 수직 정렬이 포함된 요소의 하단으로 이동됩니다. 이러한 변경으로 디센더 공간이 제거되어 이미지가 아래쪽 경계와 동일하게 정렬되고 수수께끼의 공백 미스터리가 해결되었습니다.