图片之间产生空白间隔原因及解决方案

1.左右产生的空白间隙，如上图；

原因：因为是img标签的显示是inline-block的原因，你换行在父级元素看来，是有一个空格的字符的，所以存在8个像素，这个因浏览器不同，像素也不一样。根本原因在于父级元素把空格当做一个字符处理。

解决方案：

1. 父级元素 设置 font-size: 0;
2. <img /><img/><img/> 连着写，没有空格换行符；
3. 设置 浮动float, 但要记得清除掉float。

2.上下产生的空白间隙，如上图；

原因：这是由于图片默认是按基线对齐方式，看上图蓝色线为基线，基线和底线有一小段间隙，这个就是产生间隙的原因；

解决方案：

    1.给图片设置display:block，将图片转为块级元素；

    2.给图片设置vertical-align:top; 值可以是top,middle,bottom,text-top,text-bottom；（垂直对齐方式）