css中font-size為0的妙用（消除內聯元素間的間隔）

前言

<div>
    <input type="text">
    <input type="button" value="提交">
</div>

看不片我們不難發現為什么會多出一個間隙出來呢。我們該如何消除呢？

inline && inline-block元素間隙

元素間留白間距出現的原因就是標簽段之間的空格

因此去除的方法之一就是把標簽的間隙去除掉

<div>
    <input type="text"><input type="button" value="提交">
</div>

果然就沒有間隙了，但是這樣代碼的可讀性太差了。
解決方法還有一些，例如：margin負值 , letter-spacing, word-spacing,浮動等但是最佳的解決方案還是font-size:0

font-size = 0

<div style="font-size: 0;">
    <input type="text">
    <input type="button" value="提交">
</div>

小結

之所以會想着把這個問題記錄下來也是，當碰到一些精細的設計圖時，距離的調整很重要。