img父元素高出3px原因及解决方案

转载自：https://blog.csdn.net/wzp6010625/article/details/80718791
1、问题

当div/a中包含img时，父元素的高度比img图片的高度多出3px：

//css
img {
	height: 130px;
	width: 130px;
	}
div{
	border: 1px solid;
	}

<div>
   <img src="lights.jpg">
</div>  

  运行结果可以看出div的高度比img高出3px.

2、原因
img是一种类似text的标签元素，在结束的时候，会在末尾加上一个空白符（匿名文本），这个文本外有一个匿名行级盒子，它默认的vertical-align是baseline的，而且往往因为上文line-height的影响，使它有个line-height，从而使其有了高度，因为baseline对齐的原因，这个匿名盒子就会下沉，往下撑开一些距离，所以把父元素撑高了。

3、 解决方案
（1）消除掉匿名盒子的高度，给a设置line-height:0或font-size:0
（2）给两者vertical-align:top，让其top对齐，而不是baseline对齐
（3）给img以display:block，让它和匿名行级盒子不在一个布局上下文中，也就不存在行级盒的对齐问题