내 이미지 아래에 예상치 못한 공간이 있는 이유는 무엇이며 어떻게 해결할 수 있습니까?

아래에 예기치 않은 공간이 표시되는 이미지: 자세한 설명

문제:

이미지, 심지어 제로 패딩과 여백으로 스타일을 지정하면 그 아래에 알 수 없는 빈 공간이 나타나는 경우가 많습니다. 이로 인해 이미지의 테두리가 아래쪽 가장자리에서 멀어지게 됩니다.

원인:

이미지는 기본 규칙을 준수하는 인라인 블록 요소로 처리됩니다. 타이포그래피. 기준선은 텍스트 블록에 있는 대부분의 문자에 대한 최종선입니다. 그러나 "p" 및 "q"와 같은 특정 문자는 기준선 아래로 확장되므로 겹치는 것을 방지하기 위해 기준선과 하단 선 사이에 공간이 필요합니다.

문제 해결:

이미지 아래 공간을 없애려면 다음 CSS를 사용하여 수직 정렬을 조정하세요.

img { vertical-align: bottom; }

이렇게 정렬됩니다. 이미지를 줄 맨 아래로 밀어 불필요한 공간을 제거합니다.

잠재적 문제 및 해결 방법:

그러나 이제 작은 이미지의 위에 공간이 표시될 수 있습니다. 이 문제를 해결하려면 다음 CSS를 컨테이너 요소에 추가하세요.

line-height: 1px;

이렇게 하면 줄 높이가 최소 값으로 설정되어 작은 이미지도 올바르게 정렬됩니다.

위 내용은 내 이미지 아래에 예상치 못한 공간이 있는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!