在寫代碼的時候經常遇到這樣一個問題，如果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包裹a標簽也會出現同樣的問題。
解決辦法有三種：
1.設置div{ font-size: 0}；將外層塊級標簽的font-size設置為0；
2.設置img{ display: block};將內層行內標簽的display設置為block，將其變為塊級標簽；
3.設置img{ vertical-align:top;}；將內層行內標簽的vertical-align設置為top；