이 공백은 어디에서 유래 되었습니까?

Question

이미지 하단에 원치 않는 공백이 표시되어 내 sidebar_box에 문제가 있습니다.

문제는 이것이 내가 당신이 jsFiddle

내 HTML 구조를 볼 수 있습니다

(이 텍스트 또는 UL 목록에 발생하지 않습니다) 내부 이미지를 배치하는 경우에만 일어날 것이다 :

<div id="sidebar"> 
    <div class="sidebar_box"> 
     <div class="sidebar_header">Advertisement</div> 
     <img src="./images/square_add.png" width="180" height="150" /> 
    </div> 
</div> 

관련 CSS는 재현 :

,536,

*{ 
    padding:0; 
    margin:0; 
} 

img{ 
    border:0; 
} 

#sidebar .sidebar_box{ 
    width:180px; 
    background:#fff; 
    border:1px solid #000; 
} 

#sidebar .sidebar_header{ 
    width:180px; 
    background:#ddd; 
    border-bottom:1px solid #000; 
} 

나는 우둔 하 고 이미 내 지식의 모든 것을 시도했다.

Answer 1

이미지에 vertical-align: bottom을 추가하십시오. 이는 이미지가 인라인으로 표시되므로 q, p 또는 다른 문자가 기준선 아래로 떨어질 경우 아래에 공백을 남겨 두어야하기 때문에 발생합니다.

Answer 2

쓰기이 :

img{ 
    border:0; 
    vertical-align:top; 
} 

확인 당신이 사업부의의의 높이를 지정하는 경우, 어쩌면이 http://jsfiddle.net/sKE6y/1/