css - 去掉圖片下的白邊

造成原因：

    圖片的 display 屬性默認是 inline ，而這個屬性的 vertical-align 的默認值是baseline。

 

解決辦法1（ 建議使用block ,  對 ie瀏覽器 比較友好 ）：

    將 img 的 display 設置為 block

img{
    display : block ;  
}

 

解決方法2:

    將 img 的 vertical-align設置為middle

img{
    vertical-align : middle ;  
}

 

解決方法3:

　 給 img 的父級容器 添加屬性 overflow:hidden

.img-parent{
       overflow : hodden ; 
}

 

---

 

補充 : 

 

定義和用法 : 

vertical-align 屬性設置元素的垂直對齊方式。

 

說明 :

該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。

默認值：	baseline
繼承性：	no
版本：	CSS1
JavaScript 語法：	object.style.verticalAlign="bottom"