css:block元素中包含img底部出现间隙的原因和解决方法

原因 根据【css权威指南（中文第三版）】

因为是基线对齐（vertical-align: baseline，要求一个元素的基线与其父元素的基线对齐）的规则，这个对齐规则使得一些Web浏览器总把替换元素的底边放在基线上，即使该行中没有其他文本。例如一个表单元格中只有一个图像。这个图像可能实际在基线上，不过在某些浏览器中，基线下面的空间会导致图像下出现一段空白。另外一些浏览器则会把图像“紧包”在表单元格中，所以不会出现空白。根据CSS工作组的意见，这种空白的行为是正确的，不过大多数创作人员都不喜欢这种做法。

解决方案

1. 给图片标签设置为：display:block。

   img{
       display: block;
   }
   

2. 定义容器里的字体大小为0。

   div{
       font-size: 0;
   }
   

3. 定义图片img标签vertical-align:top,vertical-align:bottom,vertical-align:middle。

   img{
       vertical-align: top || bottom || middle;
   }
   

还有其他的方法，不过个人觉得这三个方法就足以解决了。