a標籤中使用img後的高度多了4px

前兩天，在作一個網站的時候，發現a標籤中使用img後的高度多了4px，各類糾結。

最後，仔細分析，終於找到緣由了，由於img是行內元素，默認display: inline; 它與文本的默認行爲相似，下邊緣是與基線（baseline）對齊，而不是緊貼容器下邊緣。將displayp設置爲block便可消除4px的BUG。

既然緣由找到了，那麼，解決方案確定不止這一種啦！

以下：

1.將圖像定義成block (display:block)
2.給父級設置固定高度，而後overflow:hidden
3.設置font-size:0;
4.設置 img 的 vertical-align: bottom;
5.設置 img 的 margin-bottom: -4px;

就是這樣，之後能夠根據具體使用場景來肯定最優方案了。