명시적인 CSS가 없음에도 불구하고 내 HTML5 이미지에 3px 하단 여백이 있는 이유는 무엇입니까?

HTML 5 이미지 이상: 설명할 수 없는 아래쪽 여백 문제

HTML 5를 사용할 때 사용자는 이미지가 DIV 요소 내에 래핑되는 당황스러운 문제에 직면할 수 있습니다. 설명할 수 없는 3px 하단 여백이 나타납니다. 이 예외는 CSS에 명시적인 여백 정의가 없음에도 불구하고 지속됩니다. 예를 들어 다음 HTML 구조를 고려해 보세요.

<div class="placeholder">
    <img src="/static/imghwm/default1.png" data-src="/haha.jpg" class="lazy" alt="">
</div>

display: 테이블 스타일을 포함하는 .placeholder DIV를 사용하면 이미지 크기가 50x50px로 유지됩니다. 그러나 .placeholder DIV는 이상하게도 수직으로 53px로 확장됩니다. 이러한 예상치 못한 동작은 해결 방법을 찾는 많은 개발자들을 당황하게 했습니다.

해결책: 수직 정렬

이 예외의 근본 원인은 이미지를 텍스트 문자로 처리하는 데 있습니다. 그 아래에는 "y" 또는 "g"와 같은 문자의 하위 문자가 차지하는 공간과 유사한 불필요한 공간이 있습니다. 이 문제를 해결하기 위해 CSS 수직 정렬 속성은 그러한 공간이 할당되지 않도록 합니다. 거의 모든 수직 정렬 값이면 충분하며 중간이 널리 선택됩니다.

img {
    vertical-align: middle;
}

이 솔루션을 구현하면 3px 하단 여백이 효과적으로 제거되고 이미지 표시 문제가 해결됩니다. 업데이트된 jsFiddle에서 볼 수 있듯이 이제 이미지와 주변 DIV는 이미지 아래에 특이한 빈 공간 없이 의도한 크기를 표시합니다.

위 내용은 명시적인 CSS가 없음에도 불구하고 내 HTML5 이미지에 3px 하단 여백이 있는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!