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

HTML：

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

---

CSS:

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

---

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

---

参考：

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

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

---

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

---

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