<img>元素底部留有空白
来源:互联网 发布:怎么避免mac涂层脱落 编辑:程序博客网 时间:2024/06/05 08:30
要理解这个问题,首先要弄明白CSS对于 display: inline 元素的 vertical-align 各个值的含义。vertical-align 的默认值是 baseline,这是一个西文排版才有的概念:
对比一下 vertical-align 的另外两个常见值,top 和 bottom:
到这里就比较明显了,要去掉这段空白,最直接的办法是将图片的 vertical-align 设置为其他值。如果在同一行里有文字混排的话,那应该是用 bottom 或是 middle 比较好。
另外,top 和 bottom 之间的值即为 line-height。假如把 line-height 设置为0,那么 baseline 与 bottom 之间的距离也变为0,那道空白也就不见了。如果没有设置 line-height,line-height 的默认值是基于 font-size 的,视渲染引擎有所不同,但一般是乘以一个系数(比如1.2)。因此,在没有设置 line-height 的情况下把 font-size 设为0也可以达到同样的效果。当然,这样做的后果就是不能图文混排了。
因此,总结,去掉<img>元素底部空白方法:
<div><img></div>
1、img{vertical-align:bottom/middle/top;}
2、img{display:block/inline-block;}
3、div{font-size:0;} //外层为行内元素时也可以设置line-height:0;
0 0
- <img>元素底部留有空白
- <img>元素底部为何有空白?
- <img>元素底部为何有空白
- <img>元素底部为何有空白?
- img的底部空白
- a嵌套img标签的问题:<img>元素底部为何有空白?
- img底部总是有空白
- img图片元素下多余空白解决方案
- 解决img图片元素下多余空白
- div包裹img,底部一小段空白bug
- IE6中的图片元素img下出现多余空白BUG
- img图片元素下多余空白BUG解决方案
- ImageVidew显示图片上下留有空白
- UITextView 文字上留有一大片空白
- IOS:tableView顶部留有空白的学习
- UIScrollView顶部留有64的空白
- li元素中包含img元素出现5px空白的解决方法
- ActionBar设置自定义setCustomView()留有空白的问题
- windows 路由表
- 设计模式读书笔记-----访问者模式
- hibernate+spring架构有感
- 取剪贴板内容
- 数据结构整理_有序顺序表合并
- <img>元素底部留有空白
- iOS 图形库CorePlot
- Swift-字典
- iOS8 tableview separatorInset cell分割线左对齐,ios7的方法失效了
- Swift-元组tuple
- 文件存储的实现-login登录案例1-内置存储
- Jforum使用FCKeditor的两种方法
- MySQL hash索引和btree索引的区别
- LeetCode Populating Next Right Pointers in Each Node