一、提出問題

　　在瀏覽器中，圖片有一個下間隙問題，有人也稱之為圖片3像素BUG。如下圖：

，這是放大過的效果。我們可以清晰的看到，圖片明顯沒有跟文字的最底部對齊，比如字母g，就比圖片的底部更下探出一截。

　　這裏需要澄清一下：

　　1.這並不是什麽瀏覽器bug，而只是英文字母書寫時有個基線的問題，基線決定了圖片的對其方式。這才是造成瀏覽器中圖片下間隙的本質。

　　那麽，什麽是基線？

　　我們小時候學英文，一開始都是用的四線本寫英文字母，就是那個長的跟五線譜一樣的本，只不是4條線。其中第3條線就是基線，此線是絕大多數比較矮的字母的腳部對齊的線。比如a、z、x，這些短小一點的字母，它們的是以第3條線作為字母底部的對齊線的。但有的字母比較“高大”，比如g，y，它們的尾巴就會伸到第4條線上。

　　同理，在網頁上顯示字符，也有一個基線存在，並且這個基線也是以英文4線普的對齊理論來對齊的。所以，我們就會看到下圖的情況

　　很明顯，我添加上去的這條紅線，就是網頁上這一行文字的基線位置。

　　2.這個下間隙也並不是固定的3像素，而是變化的。　

　　知道了基線的概念，我們就知道了，像“g”這樣比較高的字母，它探出基線之下的內容占多少像素，其實是跟當前元素設置的字號大小有關的。

　　而圖片在網頁中默認的展示樣式是inline-block的，所以它的對齊方式就跟文本一樣，要跟基線對齊，這樣就產生了圖片與容器的下間隙。

　　由於瀏覽器默認文字的字號是14px（有的是默認16px），所以就造成了默認的3像素的下間隙。但其實我們已經知道了，如果當前容器設置的字號遠遠大於16px，那麽這個下間隙將大於3像素。

　　二、解決辦法

　　去除圖片下間隙的辦法有很多，常用的有3種

　　（1）設置父盒子字號為0　　比如：

.box{
   font-size: 0;  
}

　　（2）改變圖片的display　　

.box img{
   display: block;  
}

　　（3）給圖片設置垂直對齊方式

.box img{
   virtical-align: middle;//設置為任意值都可以  
}

圖片去除下間隙（圖片3像素）的方法