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}

以上兩種方法都可以。修改後的圖片連接處白線消失。