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;