首页 > 其他 > 详细

font-size:0的作用

时间:2017-02-09 15:58:09      阅读:256      评论:0      收藏:0      [点我收藏+]

看别人的代码看到过font-size:0这个设置,不明白为何这样操作,后来研究一下才明白:这是像素级还原设计稿很有用的设置,因为元素节点有文本节点,在缩进代码时会占据宽度,这么说不好理解,演示如下:

 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;再看看效果

技术分享

可以看到这才是我们想要的结果,因此在实际开发中,为了更好的还原设计稿,在父元素很有必要设置font-size:0,避免莫名其妙的间距。

font-size:0的作用

原文:http://www.cnblogs.com/guagnxu/p/6382163.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!