인라인 블록 이미지 아래에 추가 공간이 있는 이유는 무엇이며 어떻게 해결할 수 있습니까?

이미지 아래 신비한 공간: 원인과 해결책을 밝히다

이미지를 인라인 블록 요소로 표시할 때 다음과 같은 난처한 시나리오에 직면할 수 있습니다. 패딩과 여백을 0으로 설정했음에도 불구하고 그 아래에 빈 공간이 나타납니다. 이 당혹스러운 현상은 텍스트의 문자와 유사한 인라인 블록 요소의 고유한 동작에서 비롯됩니다.

문자에 문자의 밑줄을 나타내는 기준선이 있는 것처럼 이미지도 이 기준선에 맞춰 정렬됩니다. 결과적으로 측면 텍스트가 없더라도 이미지가 기준선에 정렬되어 'p' 및 'q'와 같은 문자에 꼬리를 달기 위해 예약된 공간으로 인해 아래에 틈이 발생합니다.

이를 해결하려면, 수직 정렬:하단의 기능을 활용할 수 있습니다. 이 CSS 속성은 이미지를 줄 아래쪽에 고정하여 남아 있는 공백을 효과적으로 제거합니다.

줄 높이보다 작은 이미지의 경우 미묘한 조정이 필요합니다. 컨테이너 요소에 line-height:1px를 도입하면 이미지 위의 잠재적인 공간 침입이 제거됩니다.

이러한 간단한 조정을 채택하면 이미지 아래에 빈 공간이 생기지 않고 할당된 공간 내에 꼭 맞게 자리잡을 수 있습니다.

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