图片连接处出现白线

最近做移动端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

以上两种方法都可以。修改后的图片连接处白线消失。

关于更详细的原理见 这里