這次做的項目，客戶說。banner圖的上下之間不要留有空隙，細致一看才發現，上下居然都有空隙。審查元素，發現全部的div,img的padding和margin都是0，對於這個間隙到底是假設產生的真的是找不到原因。

網上查了一下，類似的問題還蠻多的。

解決方法基本是四種：

1.將img設置為block;

這個基本能夠解決img和div下方的縫隙問題。

2.設置img的豎直對齊方式

v-align:bottom;

3.設置父div的font-size:0

4.設置外層的div的line-height:0

推薦使用第一種方式。

可是本次項目奇怪的地方在於上下皆有縫隙，開始時，上面的縫隙能夠通過margin-top:-10px解決。可是後來改了代碼結構後，此方式也不行。

網上找了非常多，亦沒有解決方案。

因此採用定位的方式解決：

設置父元素的position為relative

子元素img的position為absolute;設置top為0，完美解決此問題。

為了避免影響其它布局，設置下div的高度為img的高度。

問題出現的原因依然沒有找到，僅僅是攻克了這個問題。解決這個問題的方式有非常多。只是郁悶的是經常攻克了問題。卻不知道為了是如何發生了，不利於日後寫代碼的過程中去避免這些問題。

div和img之間的縫隙問題