CSS基本布局——去除图片连接处的白线

在学习CSS基本布局时遇到图片连接处出现缝隙的问题，原代码如下所示：

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

图片本身没有白边，但在图片连接处出现了白边缝隙，而且设置img的属性
{margin:0;}也无法解决。

原来，img是内联块状元素，默认之间是存在缝隙的。要去除缝隙有两种方法：

1.设置font-size属性为0

.content {font-size:0}

2.设置img为block元素

img {display:block}

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

关于更详细的原理见 这里