参考地址 CSS基本布局——去除图片连接处的白线
最近做移动端h5活动页，涉及到多图片拼接，遇到了一个坑就是图片连接处出现白线，当然查资料都说是img自身属性是inline-block导致，只要父元素设置font-size：0或者设置img display: block; 便可。但是我设置了没有用，这条线不是所有的机型都有，而且页面滚动之后又消失，我琢磨半天，各种尝试，发现把图片高度减少（增加）1px就解决了。因为我们的项目是用postcss-px-to-viewport，我每张图片都是设置高度的，应该是数值转换出现偏差。
<main>
<div class="content">
<img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg">
<img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg">
<img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg">
</div>
</main>
1
2
3
4
5
6
7
图片本身没有白边，但在图片连接处出现了白边缝隙，而且设置img的属性
{margin:0;}也无法解决。
原来，img是内联块状元素，默认之间是存在缝隙的。要去除缝隙有两种方法：
1.设置font-size属性为0
.content {font-size:0}
1
2.设置img为block元素
img {display:block}
1
以上两种方法都可以。修改后的图片连接处白线消失。
关于更详细的原理见 这里