html插入图片为什么下面有小缝隙

默认文字和图片是与基线对齐的，父盒子被图片撑开后，下面会有一个小缝隙，

 

 

 

• 原因：

  图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。

  就是图片底侧会有一个空白缝隙。

• 解决的方法就是：

  • 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。

  • 给img 添加 display：block; 将行内块元素转换为块级元素就不会存在问题了。

  •