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，讓它和匿名行級盒子不在一個佈局上下文中，也就不存在行級盒的對齊問題