IMG圖片下面出現下邊距的解決辦法

        在不同瀏覽器下圖片下面會出現莫名的下邊距，經測算在FF中 下邊距大概是多出了3畫素左右，而IE6更多，在IE8中展示卻是完好的，以往的做法只需要將img定義為塊狀級就解決了問題；
        但其原理是：圖片底部的空隙實際上涉及行內元素的佈局模型，圖片預設的垂直對齊方式是基線，而基線的位置是與字型相關 的。所以在某些時候，圖片底部的空隙可能是 2px，而有時可能是 4px 或更多。不同的 font-size 應該也會影響到這個空隙的大小。
        如果將圖片的垂直對齊方式設定為 top 或 bottom，我們會發現這個空隙也會消失。
        行內元素的格式化實際上比我們想像的要複雜得多，這也是我至今不願面對的一個知識點。還好它並不常用。
        ps: 解決辦法給img定義vertical-align或者定義為塊狀，最優的解決辦是定義vertical-align，注：定義vertical- align為middle時在IE6中大概還有一畫素的頂邊距，最好為top或bottom。當然還有種極端解決辦法大家可以試試就是將 父容器的字型大小為零，font-size:0。


解決方法：

1.將img塊狀化 ul li img{display:block;}

2.將img左浮動 ul li img{float:left;}

3.為img新增樣式 ul li img{vertical-align:top|bottom|text-top|text-bottom;}

4.為img的父級加高度 ul li{height:120px;}

5.為img的父級加樣式 ul li{font-size:0;}

轉載：https://blog.csdn.net/yourlin/article/details/42024665?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-2&spm=1001.2101.3001.4242