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

HTML5 Enigma: 이미지에 예상치 못한 여백이 표시됨

웹사이트를 HTML5로 변환할 때 발생하는 독특한 문제를 생각해 보세요. 예기치 않게 DIV 요소 내에 포함된 모든 이미지에는 CSS에 여백이 없음에도 불구하고 설명할 수 없는 3px 하단 여백이 표시되었습니다. 광범위한 조사에도 불구하고 이 예외의 원인은 여전히 ​​파악하기 어렵습니다.

이 문제의 징후는 이미지에 50x50 픽셀 크기가 할당되고 포함 DIV 요소(

)가 디스플레이로 구성되었을 때 명백해졌습니다. : 테이블. 흥미롭게도 .placeholder의 높이 크기는 의심스럽게 53픽셀로 증가했습니다.

수수께끼 해결

이 당황스러운 동작에 대한 해결책은 내부 이미지의 고유한 특성을 이해하는 데 있습니다. HTML. 기본적으로 이미지는 텍스트 문자와 유사하게 동작하므로 "y" 또는 "g"와 같은 문자의 가상 "꼬리"를 위해 이미지 아래에 예약된 공간이 생깁니다. 이 문제를 해결하려면 CSS 속성인 Vertical-align을 사용하여 추가 세로 간격이 없음을 나타낼 수 있습니다.

구현

원치 않는 아래쪽 여백을 제거하려면, 다음 CSS 규칙을 통합하면 됩니다.

img {
    vertical-align: middle;
}

vertical-align 값을 지정하면 이미지의 수직 정렬이 상위 요소가 조정되어 예약된 공간을 효과적으로 무력화합니다.

시각적 확인

이 솔루션은 업데이트된 jsFiddle에서 우아하게 시연됩니다: [링크 제공].

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

원천：php.cn

이전 기사：유효한 XHTML 1.1에서 Div 요소가 클릭 가능한 링크처럼 작동하도록 하려면 어떻게 해야 합니까? 다음 기사：CSS의 `content` 속성으로 HTML을 삽입할 수 있나요?

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

최신 이슈

function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...

에서 2024-04-29 11:01:01

0

3

2245

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19

0

11

2385

자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.

에서 2024-04-19 15:37:47

0

1

1995

상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');

에서 2024-04-18 23:52:34

0

1

1881

CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어

에서 2024-04-16 10:10:18

0

0

1950

관련 주제

더>

• vb에서 데이터베이스에 연결하는 방법
• win11 제어판을 여는 방법
• vs2010 키
• 리플 통화 시장 동향
• 토폴로지 최적화란?
• Tomcat이 페이지를 표시하지 못하는 문제를 해결하는 방법
• 크기를 비교하는 BigDecimal 메서드
• 테이블 필드 삭제