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，從而使其所占高度變大，盒子下沉，往下撐開了一些距離。

從根本上解決的辦法：

給其父元素設置line-height:0或font-size:0;

給img設置top對齊;

給img的顯示設置為display:block;

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

轉載于:https://www.cnblogs.com/mengxuan/p/4929463.html

總結

以上是生活随笔為你收集整理的img元素高度多出来的几像素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。