在寫代碼的時候經常遇到這樣一個問題，如果div裏嵌套一個img元素且div的高度是由img的高度來撐開，那麽div的高度總會比img的高度多3px。好了，廢話不多說，直接給大家上代碼。

html代碼：

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

css代碼：

#header{
    width : 400px ;
    border : 1px solid #000 ; /* 為了方便觀察，此處給div加了1px的邊框 */
}
#header img{
    width: 100% ;
}

運行結果如下圖：

可以明顯看到div實際高度高出img高度3px。為了解決此問題，我們只需要給img元素添加一個display : block ;即可，代碼如下：

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

現在再來看運行結果，是不是完全變好了呢？

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

div中放入一個img元素導致div高度會多出幾個像素