最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css中网页图片下方多出几像素问题分析
时间:2014-09-01 编辑:简简单单 来源:一聚教程网
不知道大家有没有注意到,网页的图片下方会多出来 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;
}
最推荐这种方法,治标又治本。
-
上一个: CSS实现文字半透明显示在图片上方法
-
下一个: 解决ie浏览器不兼容浮动float的办法
相关文章
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31
- css3中仿放大镜效果的几种方式原理介绍 10-26
- CSS3切割轮播图的代码展示 10-26
- CSS组合选择器解析 10-26
- css带搜索导航栏的代码展示 10-26