DIV의 HTML5 이미지에 때때로 신비한 3px 하단 여백이 있는 이유는 무엇입니까?

HTML5 이미지의 신비한 3px 여백 이해

DIV 요소 내의 이미지에 이상한 3px 하단 여백이 나타나는 예상치 못한 현상이 여러 사용자에게 발생했습니다. 명시적인 CSS 여백이 없음에도 불구하고. 이 이상 현상을 더 자세히 알아보기 위해 제공된 코드 조각을 살펴보겠습니다.

<div class="placeholder">
    <img alt="" src="/haha.jpg" />
</div>

display: table 스타일을 .placeholder에 할당할 때 추가된 높이(50px 대신 53px)는 이미지가 다음과 같이 작동함을 나타냅니다. 텍스트 문자열의 문자, "y" 또는 "g"와 같은 문자를 위한 공백을 아래에 남겨둡니다.

이 문제를 해결하려면 문제가 발생하면 CSS 속성 Vertical-align을 사용하여 그러한 공간이 필요하지 않음을 나타낼 수 있습니다. 제공된 코드 블록에서 볼 수 있듯이 수직 정렬: 중간을 설정하면 추가 공백을 남기지 않고 이미지를 수직으로 정렬합니다.

솔루션이 구현된 수정된 코드는 다음과 같습니다.

img {
    vertical-align: middle;
}

적용하여 이 조정을 통해 이미지는 DIV 요소 내에서 적절하게 정렬되어 3px 여백이 제거됩니다. 사용자는 추가된 jsFiddle 링크를 참조하여 실제 예제를 볼 수 있습니다:

http://jsfiddle.net/fRpK6/1/

위 내용은 DIV의 HTML5 이미지에 때때로 신비한 3px 하단 여백이 있는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!