font-size:0;

柔光的暖阳◎ 2021-10-09 03:16 339阅读 0赞

ont-size:0的作用

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

html：

  1. <div class="box">
  2.   <div>1</div>
  3.   <div>2</div>
  4.   <div>3</div>
  5. </div>

css：

复制代码

  1. .box{
  3.   width: 90px;
  4.   height: 60px;
  5.   border: 1px solid #ccc;
  6. }
  7. .box div{
  9.   display: inline-block;
  10.   box-sizing: border-box;
  11.   font-size: 14px;
  12.   width: 30px;
  13.   border: 1px solid ;
  14. }

复制代码

理论上box下面的三个div都是30px，刚好在一行显示，但是实际效果是这样：

1098079-20170209145030213-330247522.png

这就是上文说到的原因，我们在box下添加font-size:0;再看看效果

1098079-20170209145334791-2090940407.png

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

发表评论

表情：
评论列表 （有 0 条评论，339人围观）

还没有评论，来说两句吧...

相关阅读