여백과 여백이 0인 경우에도 내 이미지 아래에 예기치 않은 간격이 있는 이유는 무엇입니까?

예기치 않은 이미지 아래 간격: 원인 및 해결 방법

패딩 및 여백 값을 0으로 적용했음에도 불구하고 이미지 아래에 알 수 없는 빈 공간이 표시됩니다. 이 수수께끼 같은 문제는 인라인 블록 요소 내에서 문자로 처리되는 이미지의 고유한 동작에서 발생합니다.

문자로서 이미지는 일관성을 유지하기 위해 텍스트 문자에 설정된 선인 기준선에 정렬됩니다. 그러나 "q" 및 "j"와 같은 특정 문자에는 기준선 아래로 확장되는 디센더가 있습니다. 후속 라인과의 충돌을 방지하기 위해 기준선 아래에 공간이 예약되어 있습니다.

이 다이어그램은 텍스트 정렬을 관리하는 다양한 라인을 보여줍니다.

[WHATWG의 기준선 다이어그램 삽입]

따라서 , 텍스트가 없어도 이미지가 기준선에 정렬됩니다. 이 상황을 해결하기 위해 간단한 CSS 조정을 구현할 수 있습니다.

img {
  vertical-align: bottom;
}

이 수정은 이미지를 줄 아래쪽에 정렬하여 알 수 없는 공간을 제거합니다. 그러나 작은 이미지(라인 높이보다 짧은)를 처리할 경우 이미지 위에 추가 공간이 나타날 수 있습니다. 이 문제를 해결하려면 line-height: 1px;

이 포괄적인 설명과 솔루션은 비슷한 문제를 겪은 많은 사람들의 우려를 해결해 줄 것입니다.

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