a标簽中使用img後的高度多了4px

在某個項目中，發現a标簽中使用img後的高度多了4px，各種樣式調整，查閱資料，最終解決此問題。

由于img是行内元素，預設display: inline; 它與文本的預設行為類似，下邊緣是與基線（baseline）對齊，而不是緊貼容器下邊緣。

将displayp設定為block即可消除4px的bug。

其實解決方法不止一種：

1.将圖像定義成    img:{display:block;}

2.給父級設定固定高度，然後   overflow:hidden

3.設定  font-size:0;

4.設定 img 的 vertical-align: bottom;

5.設定 img 的 margin-bottom: -4px;