font-size = 0 的作用
来源:互联网 发布:多机位 淘宝直播 编辑:程序博客网 时间:2024/05/18 01:21
问题的根源是 inline(a标签默认是display:inline) 和 inline-block (.list 设置的是 display:inline-block) 是内联布局,既然是内联那么就会受空白区域的影响。
这是像素级还原设计稿很有用的设置,因为元素节点有文本节点,在缩进代码时会占据宽度,这么说不好理解,演示如下:
HTML
<div class="box"> <div>1</div> <div>2</div> <div>3</div></div>
CSS
.box{ width: 90px; height: 60px; border: 1px solid #ccc;}.box div{ display: inline-block; box-sizing: border-box; font-size: 14px; width: 30px; border: 1px solid ;}
理论上box下面的三个div都是30px,刚好在一行显示,但是实际效果是这样的:
这就是上文说到的原因,我们在box下添加 font-size:0;
再看看效果:
总结:
1、可以看到这才是我们想要的结果,因此在实际开发中,为了更好的还原设计稿,在父元素很有必要设置font-size:0,避免莫名其妙的间距。
2、这种情况的另一种解决方式:去掉空白部分。(不采用,例子如下:)
<div class="box"><div>1</div><div>2</div><div>3</div></div>
阅读全文
1 0
- font-size = 0 的作用
- font-size:0的作用
- font-size:0的作用
- font-size:0 的特殊作用
- font-size:0的妙用
- 诡异的Ie 7:<font size="+0">
- box-shadow,font-size=0
- font-size:0;
- font-size和font标签的size属性的区别
- font-size:100%的原因
- font-size属性的继承
- CSS的font-size属性
- font-size:0; 使用技巧
- font-size: 0;解决inline元素间的空白间隙
- Font Size
- font size
- Font Size
- Font size
- *(volatile unsigned long *) 语法
- 手机分辨率大小自适应功能
- MySQL慢查询日志分析工具pt-query-digest安装
- Java开发中的23种设计模式详解----备忘录模式(Memento)
- 找一个好工作,谈一份好薪水
- font-size = 0 的作用
- GSON中使用@SerializedName() 来命名JSON中的一些字段(自用)
- JSON和JSONP的区别
- 【leetcode】binary-tree-maximum-path-sum
- PullRefreshScrollView的上拉加载和下拉加载
- Java成长建议
- JDK的Parser来解析Java源代码详解
- Java的接口与抽象类的深入理解
- 成功人士的七个良好习惯