代碼如下：一個簡單的div裝在一個img中，
然而在預覽時卻發現這種情況
也就是說img下方會無緣無故出現一個空隙。然后你發現，只要給img元素加上一個屬性
vertical-align:middle 就解決了問題！！！
所以這是為什么呢？
首先我們應該知道img是一個行內塊元素，而行內塊元素的默認對齊方式則是基線對其，下面通過我們熟悉的文字對齊來解釋說明一下
像上圖一樣，圖中文字的對其方式就是基線對齊，不過我們也會發現這樣的話文字和底部會有一段距離，
而圖片就相當於是其中的x，他的最底部對齊的是基線，所以當line-height到達一定高度時下方的距離就會存在。
針對上面的問題有如下解決方法
1、而當你設 div的line-height:0 時也可以解決問題，或者font-size:0也是可以的
2、當然你設置圖片的margin-bottom也可以解決，不過會影響你div中的布局
3、當我們設置vertical-align為top bottom middle時則使得其不再相對基線對其而是相對於頂部或中部對齊，這樣就不會產生間距了，而一般布局都是居中對齊，所以用middle時較多。