【技巧】font-size:0清除display:inline-block元素换行符间隙
来源:互联网 发布:淘宝客服售后话术 编辑:程序博客网 时间:2024/06/08 00:10
看别人的代码看到过font-size:0这个设置,不明白为何这样操作,后来研究一下才明白:这是像素级还原设计稿很有用的设置,因为元素节点有文本节点,在缩进代码时会占据宽度,这么说不好理解,演示如下:
HTML代码如下:
<div class="abc"> <div>a</div> <div>b</div> <div>c</div></div>
CSS代码如下:
.abc{ width: 90px; height: 60px; border: 1px solid #ccc;}.abc div{ display: inline-block; box-sizing: border-box; font-size: 14px; width: 30px; border: 1px solid ;}
理论上box下面的三个div都是30px,刚好在一行显示,但是实际效果是这样:
这就是上文说到的原因,我们在box下添加font-size:0;再看看效果
可以看到这才是我们想要的结果,因此在实际开发中,为了更好的还原设计稿,在父元素很有必要设置font-size:0,避免莫名其妙的间距。
阅读全文
0 0
- 【技巧】font-size:0清除display:inline-block元素换行符间隙
- font-size: 0;解决inline元素间的空白间隙
- inline-block元素间的换行符空格间隙问题
- 父级元素的 font-size:0 解决子代的inline或inlien-block的换行或图片空隙问题
- font-size --- inline-block
- display:inline-block列表布局经常会遇到的“换行符/空格间隙问题”
- display:inline-block消除间隙
- display: inline-block间隙问题
- 使用font-size:0 来去掉inline-block元素之间的空隙
- display:inline-block引发的间隙思考
- display:inline-block产生的间隙问题
- 解决display:inline-block 出现的间隙
- display:inline-block引发的间隙思考
- display:inline-block的空白间隙问题!
- display:inline-block引发的间隙思考
- 解决 display:inline-block 之间显示间隙
- display: inline-block换行问题
- inline-block元素间的间隙问题
- 网站优化需要注意哪些细节问题?
- sql基础2012
- [区间DP 好题] Food Delivery ZOJ
- 图形视图框架实战之仿QQ登录界面(可旋转)
- 【Hackerrank World11】Road Trip 题解
- 【技巧】font-size:0清除display:inline-block元素换行符间隙
- php 魔术方法__toString()的作用实例
- Ajax的使用以及跨域(上)
- Java Security:keytool工具使用说明
- 欧拉-拉格朗日方程
- 在树莓派上安装opencv,使用原装Pi Camera
- 性能测试工具操作数据库(九)-Loadrunner与MongoDB
- jQuery选择器
- HDU 1218