图片多出来的3px高度的原因，以及非hack解决方法

Question

HTML：

<div class="test"><img src="body2.jpg" alt=""></div>

---

CSS:

*{margin: 0;padding: 0;}
.test img{height: 100px;}

---

img的外边距和内填充均为0，然而.test的内容高度大于img的高度，求大神解答!!!

Answer 1

参考：

1. 火狐和谷歌中textarea的margin属性兼容

2. 为什么a标签中使用img后的高度多了几个像素？

Answer 2

.test img {
    height: 100px;
    vertical-align: top;
}

Answer 3

试试display:block，以前也碰到过