在這個問題上，《權威指南》該書第三版第 146 頁有明確說到：

如果一個垂直元素沒有基線——也就是說，這是一個圖像或表單輸入元素，或者其它替換元素——那麽該元素低端與其父元素的基線對齊。這個對齊規則很重要，因為它使得一些 web 瀏覽器總是把替換元素的底邊放在基線上，即使該行中沒有其他文本。例如，假設一個表單元格中只有一個圖像。這個圖像可能實際在基線上，不過在某些瀏覽器中，基線下面的空間會導致圖像下出現一段空白。另外一些瀏覽器則會把圖像“緊包”在表單元格中，所以不會出現空白。根據CSS工作組的意見，這種加空白的行為是正確的，不過大多數創作人員都不喜歡這種做法。

先打預防針：圖像屬於行內替換元素！

那麽我們現在回到問題本身上來，為什麽圖片上下之間會有縫隙呢？

要了解這個問題，首先就需要了解什麽是基線。簡單的說，基線就是文本行中字母"x"（小寫）的底線，請看下圖

從圖中明顯看得出來，對於每一行說，基線下面實際上還有一部分高度，要解釋這一部分高度，就需要涉及到行內框、行框和行間距等一些概念。
我們長話短說，一行文本不可能就 x 那麽高，上面下面總會有些位置留給個頭兒大些的文字，當然這只是簡單的快捷記憶方法，實際上如果需要具體了解，請參照該書“字體”和“文本屬性”章節，這裏不作贅述。

上代碼：

body{
      width: 110px;
    }
    img {
      width: 60px;
      height: 60px;
    }

<img src="http://t12.baidu.com/it/u=3117210431,262031559&fm=76" alt="">
  <img src="http://t12.baidu.com/it/u=3117210431,262031559&fm=76" alt="">
  <img src="http://t12.baidu.com/it/u=3117210431,262031559&fm=76"
 
 alt="">

因為圖片底部是相對於基線對齊的，所以圖片下面還留出一些空間，要解決這個問題，方法很多：

• 設置圖片的 vertical-align: bottom;（將圖像底部與行框底部對齊，行框底部就是這一行的最底部）
• 對圖片使用 float（float的定義是元素緊挨元素，所以不會出現縫隙）
• 指定圖片的 display: block; (垂直文本對齊屬性 vertical-align 只適用於行內或者替換元素，display改變了元素的顯示，實際上並不是只有block才會這樣，只要不是帶有inline的都不會出現縫隙，這樣做的目的就是使圖像成為塊級元素，這樣圖像就不會生成行框，也就不會是相對於基線對齊，所以也不會有基線下面的縫隙)(《CSS 權威指南》第三版第203頁)
• 指定父元素 font-size: 0; （實際上font-size並不是你看到的字體大小，而是用於設置字體的em框，它指定了如果沒有額外行間距的情況下，字體基線間的距離）
• 指定父元素 line-height: 0; (line-height 指定了基線之間的最小距離，font-size是指定沒有額外行間距時的基線距離，此處的額外行間距就是line-height來指定)

HTML圖片上下之間的空隙是什麽原因