인라인 블록 이미지 아래에 원하지 않는 공간이 있는 이유는 무엇입니까?

인라인 블록 이미지 아래 불필요한 공간 제거

웹 개발 시 래퍼 내에서 원활하게 배치된 인라인 블록 이미지를 얻는 것이 어려울 수 있습니다. . 때로는 이미지 아래에 틈이 나타나 보기 흉한 미적 느낌을 남기기도 합니다. 이 문제는 본질적으로 아래 공간을 예약하는 인라인 블록 요소의 기본 동작으로 인해 발생합니다.

기본 메커니즘

근본 원인은 CSS 상자 모델에 있습니다. 이미지와 같은 인라인 블록 요소는 콘텐츠, 패딩, 테두리 및 여백을 포함하는 직사각형 상자를 형성합니다. 기본적으로 인라인 블록 요소 뒤에 빈 줄이 있으면 브라우저는 이를 줄바꿈으로 해석하고 레이아웃에 해당 간격을 만듭니다.

해결책: 수직 정렬

불필요한 공간을 제거하려면 이미지의 수직 정렬을 수정해야 합니다. CSS 속성 Vertical-align을 top으로 설정하면 이미지가 인라인 블록 컨테이너의 상단 가장자리에 정렬되어 간격이 사라집니다.

CSS 코드:

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

예:

다음 HTML 및 CSS를 고려하세요.

<code class="html"><div id="wrapper">
    <img src="image.jpg">
</div></code>

<code class="css">#wrapper {
    background:green;
}

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

결과:

세로 정렬 속성을 적용하면 이제 이미지가 래퍼 아래에 눈에 띄는 공간 없이 래퍼 내에 꼭 맞게 맞습니다.

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