這次做的項目，客戶說，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的高度。 問題出現的原因依舊沒有找到，只是解決了這個問題。解決問題的方式有很多，不過郁悶的是常常解決了問題，卻不知道為了是怎樣發生了，不利于日后寫代碼的過程中去避免這些問題。