消除 img 标签间的默认间隙

最近在做项目的时候遇到多张图片展示的时候两张图之间存在空白区，如下图：

想要取消两个img 标签之间的空白，首先要弄清楚这个空隙怎么产生的：
原因： img 标签属于行内元素，当多个img标签在一起时他们之间有回车换行或者空格就会产生间隙；因为行内元素的对齐方式是通过其父元素的 baseline 去对其的，但是撑开高度的趋势确是元素整体的高度，以bottomline对其，所以就会产生间隙。

解决办法：
1）img { display:block};
将其改变为block元素，但是该方法太过粗暴，相当于从根本上改变了img。
2）img {vertical-align:top;}
改变其垂直对齐方式
3）div {font-size:0};
把父元素的文字大小设置为0
4）div {line-height: 0};
把父元素的行高设置为0
5）img {float: left};
使用float进行浮动
6）div { margin-bottom:-3px };
父元素设置负的margin值，这个方法不推荐
7）<img src="..." style="..."><img src="..." style="...">
标签写在同一行，不可以有空格和换行，标签多的时候代码格式不好看。