当在页面中插入图片时，img 默认底部有空白效果。

产生的原因：

由于图片的 display 属性默认是 inline ，vertical-align 属性的默认值是 baseline (以基线对齐)，所以图片底部出现留白区域。

常用解决方法：

• 将 img 变为块级元素

  img {
      display: block;
  }
  

• 设置 img 中的 vertical-align 属性值为 middle

  img { vertical-align:middle; }
  

• 将 img 的父元素的行高设置为 0

  .parent {
      line-height: 0;
  }
  

转载自：去除img标签图片底部空白