font-size: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，避免莫名其妙的間距。