여백과 패딩이 0인 경우에도 이미지에 예상치 못한 하단 패딩이 나타나는 이유는 무엇입니까?

이미지 아래의 신비한 패딩 이해

패딩과 여백이 설정되어 있음에도 불구하고 이미지 아래에 설명할 수 없는 빈 공간이 있는 이유는 무엇입니까? 0?

설명

이미지는 텍스트의 문자와 마찬가지로 인라인 블록 요소로 처리됩니다. 그들은 대부분의 글자의 아래쪽을 가로지르는 선인 기준선의 규칙을 준수합니다. 그러나 "p" 및 "q"와 같은 특정 문자에는 기준선 아래로 확장되는 디센더가 있습니다. 이러한 디센더가 후속 줄과 충돌하는 것을 방지하기 위해 기준선 아래에 공간이 예약되어 있습니다.

이미지가 이 기준선에 정렬되어 텍스트가 없더라도 하단에 추가 공간이 생깁니다.

해결책

이 문제를 완화하려면 CSS 속성인 Vertical-align:bottom을 이미지에 적용하세요. 이렇게 하면 이미지가 선 아래쪽에 정렬되어 알 수 없는 패딩이 제거됩니다.

주의

이 솔루션으로 패딩 문제는 해결되지만, 다음과 같은 경우 다른 문제가 발생할 수 있습니다. 이미지가 줄 높이보다 작습니다. 이러한 경우 이미지 위에 추가 공간이 나타날 수 있습니다. 이 문제를 해결하려면 컨테이너 요소에 line-height: 1px를 추가하세요.

위 내용은 여백과 패딩이 0인 경우에도 이미지에 예상치 못한 하단 패딩이 나타나는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!