img元素的父元素绝对定位，父元素为什么比img元素的高度多了5px

Question

img元素的父元素绝对定位，父元素为什么比img元素的高度多了5px。

HTML代码
<div class="test"><img src="img/1.jpg" alt="1"></div>

css代码
* {
    padding: 0;
    margin: 0;
}
.test {
    position: absolute;
}
.test img {
    width: 600px;
    height: 230px;
}

就会出现下图的效果


父元素为什么比img元素的高度多了5px。

Answer 1

img{display:block;vertical-align:top} 你试试

Answer 2

Img标签有默认的边框border，不同浏览器解析border的值大小好像不一样。

Answer 3

这是因为父元素下有了匿名文本，该text所在的匿名盒子有line-height，而img元素的vertical-align默认为baseline，这俩合伙把父元素撑高了。

推荐两种办法：
1.可以给父元素test设置font-size: 0;，或者将line-height设置得很小，比如line-height: 3px;
2.设置img {vertical-align: top;} 当然top之外,bottom,middle也行

另外，将img设置为block也行。

参考张鑫旭的文章