html插入圖片為什么下面有小縫隙

默認文字和圖片是與基線對齊的，父盒子被圖片撐開后，下面會有一個小縫隙，

 

 

 

• 原因：

  圖片或者表單等行內塊元素，他的底線會和父級盒子的基線對齊。

  就是圖片底側會有一個空白縫隙。

• 解決的方法就是：

  • 給img vertical-align:middle | top| bottom等等。 讓圖片不要和基線對齊。

  • 給img 添加 display：block; 將行內塊元素轉換為塊級元素就不會存在問題了。

  •