인라인 이미지 태그 아래에 예상치 못한 공백이 있는 이유는 무엇입니까?

이미지 태그 아래 신비한 공백 해결

최근 웹사이트 헤더 이미지를 CSS 배경 이미지에서 인라인 이미지로 변경하셨습니다. 이미지 요소. 이제 이미지 크기가 의도한 대로 조정되지만 그 아래에 예상치 못한 10px 간격이 발생했습니다.

Chrome의 검사기를 사용했지만 원인을 파악하지 못한 후 온라인 포럼에 도움을 요청했습니다. 제안된 솔루션 중 하나는 인쇄상의 디센더 개념을 기반으로 합니다.

디센더는 "j", "g", "p" 및 "y"와 같이 텍스트의 기준선 아래로 확장되는 문자입니다. 기본적으로 이미지와 같은 인라인 요소는 디센더에 필요한 공간을 고려한 기준선 정렬을 따릅니다.

해결책:

• 세로 설정- align: 하단에서 img 태그로: 이미지를 컨테이너 하단에 정렬하여 흰색을 제거합니다. space.
• 디스플레이: 인라인을 디스플레이: 블록:으로 변경합니다.
이렇게 하면 img 태그가 블록 수준 요소로 변환되어 기본 정렬이 제거됩니다.
• 조정 컨테이너의 line-height 속성:
line-height를 0으로 설정하면 gap.
• 컨테이너에 글꼴 크기: 0을 설정합니다.
이렇게 하면 기준선 정렬도 제거되지만 하위 요소의 글꼴 크기를 복원해야 할 수도 있습니다.

위 내용은 인라인 이미지 태그 아래에 예상치 못한 공백이 있는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!