img元素高度多出来的几像素

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元素高度多出来的几像素的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。