css中网页图片下方多出几像素问题分析
发布时间：01/15 来源： 浏览：
关键词：
css中网页图片下方多出几像素问题一般碰到都是一些新手了，对于高手都知道为什么网页中图片会多几个像素问题与解决办法，下面我们一起来看此问题的解决办法。
不知道大家有没有注意到，网页的图片下方会多出来 3 ~ 5 个像素，无论那个浏览器都是这样的。
一开始我也是在我的首页文章列表的缩略图通过审查元素发现的，因为图片套了一个 a 标签，所以我一开始怀疑是因为这个 a 的缘故，所以我将 a 的 display 改成 black，然后就好了，不会多出来像素了。直到后来我才了解到具体的原因，这里给大家说一下。
其实 img 属于 inline 元素，inline 因为受到字号和行间距的影响底部留出了一段距离，距离与字体大小有关，为了解决字母占位不同所导致的问题，那解决办法就很多了，比如：
img {
display: block;
}
或者：
.box {
font-size: 0;
}
把父元素字体为 0 就不会出现占位了，同理 line-height: 0 也可以实现。
img {
vertical-align: middle;
}
最推荐这种方法，治标又治本。
