HTML5 DIV의 이미지에 3px 하단 여백이 있는 이유는 무엇이며 어떻게 해결할 수 있습니까?

HTML5에서 이미지의 설명할 수 없는 여백 문제 수정

HTML5에서 사용자는 DIV 요소 내에 포함된 이미지에 설명할 수 없는 여백이 생기는 예기치 않은 문제에 직면했습니다. CSS 정의가 없음에도 불구하고 아래쪽 여백이 3px입니다. 이 문제는 이미지의 높이와 너비 및 DIV가 모두 50px로 설정된 경우에도 관찰되었습니다.

이 예외를 해결하려면 이미지가 텍스트의 문자처럼 동작하여 생성되는 문제를 추적할 수 있습니다. 그 아래에는 "y" 또는 "g"와 같은 문자를 걸 수 있는 공간이 있습니다. 해결책은 수직 정렬 CSS 속성을 활용하여 그러한 공간이 필요하지 않음을 나타내는 것입니다. 수직 정렬 값은 무엇이든 충분하며 "중간"이 널리 선택됩니다.

CSS에서 이 수정 사항 구현:

img {
    vertical-align: middle;
}

이 코드를 통합하면 이미지에서 원하지 않는 부분이 손실됩니다. 아래쪽 여백이 예상되는 동작을 발생시킵니다. 실제 데모를 보려면 업데이트된 jsFiddle(http://jsfiddle.net/fRpK6/1/)을 참조하세요.

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