인라인 블록 이미지 아래의 불필요한 공간을 제거하는 방법은 무엇입니까?

인라인 블록 이미지 아래 불필요한 공간을 제거하는 방법

인라인 블록 이미지를 사용할 때 추가 공간이 있는 문제가 발생할 수 있습니다. 이미지 하단과 래퍼 사이의 공간입니다. 이는 인라인 요소의 기본 수직 정렬로 인해 발생합니다.

해결책: 수직 정렬 사용

원치 않는 공간을 없애려면 수직 정렬을 설정해야 합니다. 이미지를 위해. 이는 수직 정렬 속성을 사용하여 수행할 수 있습니다. Vertical-align:top을 지정하면 이미지가 래퍼 상단에 정렬되어 추가 공간이 제거됩니다.

예:

다음 스타일을 추가합니다. CSS:

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

데모:

JSFiddle: http://jsfiddle.net/dJVxb/4/에서 실제 예제를 볼 수 있습니다. 업데이트된 CSS는 불필요한 공간을 제거하고 이미지를 래퍼 상단에 정렬합니다.

위 내용은 인라인 블록 이미지 아래의 불필요한 공간을 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!