div 里邊只包含一個img， 結果div的高度比img圖片的高度多3px

在編寫代碼的時候，遇到這樣一個問題， 下面為html和css

<div id = "header">
<img src="./img/header.png"/> 
</div>

 

#header {
position: relative;
left: 0;
width: 100%;
top: 0;
}

#header img {
/*display: block;*/
width: 100%;
}

 

結果運行之后，發現header的高度總是比img的圖片多出3px，不管是在移動端還是pc端，都會出現這種問題。

 

1， 剛開始以為是html的問題， 結果把html改成

<div id = "header"><img src="./img/header.png"/> </div>

還是不行，所以這可能就不是html的問題。

2，在網上查找資料，發現可以把img設置為block， 解決。

3，通過google了解到原因，img是一種類似text的元素，在結束的時候，會在末尾加上一個空白符，所以就會多出3px

 

   英文解釋