img元素高度多出来的几像素

HTML：

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

---

CSS:

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

---

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

img元素是一个匿名文本，该文本有一个匿名行级盒子，它的默认vertical-align是baseline，又因为上下文line-height的影响，它有一个line-height，从而使其所占高度变大，盒子下沉，往下撑开了一些距离。

从根本上解决的办法：

1. 给其父元素设置line-height:0或font-size:0;
2. 给img设置top对齐;
3. 给img的显示设置为display:block;

PS：http://segmentfault.com/q/1010000003938500