font-size:0清除display:inline-block元素換行符間隙實例頁面

看別人的代碼看到過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，避免莫名其妙的間距。