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

인라인 블록 이미지 아래 공간 확인

코드 예제에서는 디스플레이를 사용하여 텍스트와 함께 이미지를 인라인으로 표시하려고 합니다. inline-block 속성이지만 이미지 아래에 원치 않는 공간이 있습니다. 이 문제를 해결하기 위해 원인과 포괄적인 해결 방법을 살펴보겠습니다.

인라인 요소는 잠재적인 텍스트 내용을 위해 자연스럽게 그 아래에 공간을 예약하기 때문에 이미지 요소 뒤에 오는 줄 바꿈은 공간을 만듭니다. 이미지에 텍스트 내용이 없기 때문에 이 공간은 비어 있고 원치 않는 공백으로 나타납니다.

이 공간을 없애려면 줄 바꿈을 제거해야 합니다. 이를 달성하는 한 가지 방법은 이미지의 수직 정렬 속성을 상단으로 설정하는 것입니다. 이렇게 하면 이미지 상단이 주변 텍스트의 기준선에 수직으로 정렬됩니다.

<code class="CSS">img {
    display: inline-block; 
    margin: 0;
    vertical-align: top;
}</code>

이렇게 조정하면 이미지 아래 공간이 사라져 이미지가 주변 콘텐츠와 같은 높이에 놓이게 됩니다. 제공된 바이올린(http://jsfiddle.net/dJVxb/4/)에서 코드를 수정하여 이를 확인할 수 있습니다.

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