css中网页图片下方多出几像素问题分析

css中网页图片下方多出几像素问题分析

网页的图片下方会多出来 3 ~ 5 个像素，无论那个浏览器都是这样的。

其实 img 属于 inline 元素，inline 因为受到字号和行间距的影响底部留出了一段距离，距离与字体大小有关，为了解决字母占位不同所导致的问题，那解决办法就很多了，比如：

img {
  display: block;
}
或者：

.box {
  font-size: 0;
}
把父元素字体为 0 就不会出现占位了，同理 line-height: 0 也可以实现。

img {
  vertical-align: middle;
}
最推荐这种方法，治标又治本。

文章转载于：http://www.111cn.net/cssdiv/163/65795.htm