有時候，我們在添加圖片img標簽后並沒有給該標簽設置magrin屬性的margin-bottom值，在有些瀏覽器中打開就會出現圖像底部留白，為什么為造成這個原因？下面就來進行分析：由於img元素默認為inline元素，而inline元素的vertical-align屬性的默認值為baseline文字基線對齊，正好圖片底部的留白就是baseline和bottom之間的距離。最后就給大家分享一下針對該問題的解決方法。
1.把圖片設置為塊級元素
我們都知道圖片img標簽默認為內聯（inline）元素，把img標簽設置為塊元素就可以解決底部留白問題。
如：img{display:block;}
2.設置圖片的垂直對齊方式
相信很多小伙伴對vertical-align這個屬性有種很模糊的概念，和text-align屬性作用的對象易混淆：首先text-align是設置或檢索對象中文本的對齊方式（左、中、右）；vertical-align則是用於指定元素（inline元素）的上下垂直對齊方式（頂部、中間、底部、基線）。再回到剛剛這個問題，我們通過給圖片添加垂直對齊方式來解決底部留白。
如： img{vertical-align:top} (vertical-align值根據具體情況來規定：top、middle、botom)
3.設置父元素的文字大小為0
如：img的父元素為div，那么只需要給div添加一個font-size屬性並設置值為0即可。但是此方法會讓父元素div中的其他子元素繼承font-size屬性，導致文字無法顯示，這樣就會出現一些隱性錯誤，那么再針對性的給需要的子元素單獨添加font-size屬性。
4.給父元素添加overflow屬性
如果父元素規定了固定的寬高，圖片大小就會跟隨父元素而定，則可以給父元素添加overflow屬性：overflow:hidden ;
5.設置圖片的浮動或者定位屬性
給圖片設置浮動（float）或者定位（position）屬性也能夠解決地不留白問題，原理和方法一類似，就是通過添加 float 或 position 屬性來改變display屬性，被隱式變為塊級元素了。
注：使用浮動的話最后要清除浮動
6.取消圖片標簽和其父元素之間的空格
由於瀏覽器會解析空格，故可以通過消除空格來解決問題，但是這個方法我們一般推薦，因為這樣會使頁面代碼更加混亂，排版不清晰