原因在於塊級元素內部默認有行框，行框撐高了塊級元素。img和其他塊級元素並列的時候，由於img默認是display:inline-block，因此也會產生匿名塊框包裹img，匿名塊框內部生成了行框，多余了幾個像素。這也是為何把圖片添加上display:block，或者父層級font-size、line-height能夠解決這個的原因。

下面是詳細解釋：

根據W3C規範9.4.2：inline-formatting context、W3C規範10.8：line-height，行框高度計算過程大致如下：

1. 根據 ‘line-height‘ 屬性計算出每個行內元素的行內框高度；
2. 根據 ‘vertical-align‘ 屬性計算出每個行內框的垂直對齊方式；
3. 行框的高度是垂直對齊排列最上面框的定邊和最下邊框的底邊距離；
4. 如果行內框字號設置大於行內框的 ‘line-height‘ 設置，文字將溢出當前行框，他可能造成多行時文字相互覆蓋；
5. 每個計算出的行框在垂直高度上排列沒有間隙；
6. 在沒有其他塊級內容的情況下，整個容器的高度取決於多個行框累計的高度。

line-height影響到的是步驟1
vertical-align影響到的是步驟2、3

@Only1Word的理解有誤，font-size只通過影響line-height來間接影響行框的高度。
但是chrome和safari有錯誤的機制，影響了步驟4（font-size大於line-height的情形）的正確表現，詳見http://www.w3help.org/zh-cn/causes/RD5017。

圖片4像素底邊