빠른 수정:
이미지 아래의 간격 을 제거 하려면 다음을 수행 하십시오 .
- 이미지 의 세로 정렬 속성을
vertical-align: bottom; vertical-align: top;또는vertical-align: middle;
- 이미지의 표시 속성을
display:block;
라이브 데모는 다음 코드를 참조하십시오.
#vAlign img {
vertical-align :bottom;
}
#block img{
display:block;
}
div {border: 1px solid red;width:100px;}
img {width:100px;}
<p>No fix:</p>
<div><img src="http://i.imgur.com/RECDV24.jpg" /></div>
<p>With vertical-align:bottom; on image:</p>
<div id="vAlign"><img src="http://i.imgur.com/RECDV24.jpg" /></div>
<p>With display:block; on image:</p>
<div id="block"><img src="http://i.imgur.com/RECDV24.jpg" /></div>
설명 : 이미지 아래에 왜 틈이 있습니까?
이미지 아래의 간격이나 여분의 공간은 버그 나 문제가 아니며 기본 동작입니다. 근본 원인은 이미지가 교체 된 요소이기 때문입니다 ( MDN 교체 된 요소 참조 ). 이렇게하면 "이미지처럼 작동"하고 고유 한 크기, 종횡비를 가질 수 있습니다.
브라우저는 표시 속성을 계산 inline하지만 inline-block요소에 더 가깝게 만드는 특수한 동작을 제공합니다 (수직 정렬 할 수 있으므로 그것들은 높이, 위 / 아래 여백과 패딩을 변형시킵니다 ...).
이것은 또한 다음을 의미합니다.
<img>기준선이 없으므로 수직 정렬 : 기준선이있는 인라인 서식 컨텍스트에서 이미지를 사용하면 이미지 의 맨 아래가 텍스트 기준선에 배치됩니다.
( 출처 : MDN , 강조 광산 )
브라우저가 기본적으로 세로 정렬 속성을 기준선으로 계산할 때 이것이 기본 동작입니다. 다음 이미지는 텍스트에서 기준선이있는 위치를 보여줍니다.
( 이미지 소스 )
기준선 정렬 요소 는 위 이미지에서 볼 수 있듯이 기준선 아래 (예 :) 아래로 확장 되는 하위 항목의 공간을 유지해야합니다 j, p, g .... 이 구성 에서이 예에서 볼 수 있듯이 이미지 하단이 기준선에 정렬됩니다 .
div{border:1px solid red;font-size:30px;}
img{width:100px;height:auto;}
<div>
<img src="http://i.imgur.com/RECDV24.jpg" />jpq are letters with descender
</div>
그렇기 때문에 <img>태그 의 기본 동작이 컨테이너 하단에 간격을 생성하는 이유와 수직 정렬 속성 또는 디스플레이 속성을 변경하면 다음 데모와 같이 제거됩니다.
div {width: 100px;border: 1px solid red;}
img {width: 100px;height: auto;}
.block img{
display:block;
}
.bottom img{
vertical-align:bottom;
}
<p>Default:</p>
<div>
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With display:block;</p>
<div class="block">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With vertical-align:bottom;</p>
<div class="bottom">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
