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; }

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