높이 사양이 없으면 단일 이미지 만 포함하는 <div> (또는 <p> 또는 기타 유사한 요소)이 약간 더 높습니다. 파이어 폭스에서는 4px가 높고 Chrome에서는 5px 높습니다 (Firebug 및 Chrome에 해당). 추가 공간이 이미지 아래에 추가됩니다.블록 레벨 요소가 포함하는 이미지보다 높은 이유는 무엇입니까?
분명히 div에 높이를 지정하여이 문제를 해결할 수 있지만 그 공간이 왜 존재하고 그것을 제거하는 방법이 있는지 이해하고 싶습니다.
Image은 인라인 레벨 요소이므로 라인 높이 설정을 준수하며 기본적으로 텍스트의 기준선에 설정됩니다.
당신이 vertical-align: bottom이 이미지를 설정 한 경우가 하강 라인 (텍스트 행의 맨 아래)
다른 옵션은 display: block에 이미지를 설정하고이 모든 인라인 비밀을 생략하는 것입니다에 이미지를 배치합니다
CSS에 추가 : 기본 img으로
img {display: block;}
이 display:inline 따라서 모든 텍스트 행과 관련된 물건을 가지고 있습니다.
을 포함하는 에 line-height: 0px;을 더하십시오.
img을 display:block으로 설정하면 작동하지만 다른 곳에서 사용자가 숨기고있는 이미지가 display:none/display:inline 인 경우 휴식 할 수 있습니다.
위 이미지는 일반적으로 모든 이미지에 대한 차단으로 전환되며, 지정 만하려는 경우 - 클래스 선택기 또는 상위 요소에 대한 관계 소개 – gertas