div 里边只包含一个img， 结果div的高度比img图片的高度多3px

div 里边只包含一个img， 结果div的高度比img图片的高度多3px

在编写代码的时候，遇到这样一个问题， 下面为html和CSS

<div id = "header"><img src="./img/header.png"/></div>

#header { position: relative; left: 0; width: 100%; top: 0;}

#header img { /*display: block;*/ width: 100%;}

结果运行之后，发现header的高度总是比img的图片多出3px，不管是在移动端还是pc端，都会出现这种问题。

1， 刚开始以为是html的问题， 结果把html改成

<div id = "header"><img src="./img/header.png"/> </div>

还是不行，所以这可能就不是html的问题。

2，在网上查找资料，发现可以把img设置为block， 解决。

3，通过google了解到原因，img是一种类似text的元素，在结束的时候，会在末尾加上一个空白符，所以就会多出3px

英文解释