天天看點

inline-block間距問題

兄弟元素設定inline-block,會出現間隙。

inline-block間距問題

原因就是 畫紅圈的,這些空節點造成的。

inline-block間距問題

解決方法有如下幾種:

1,删除标簽之間的空節點

inline-block間距問題

但是缺點就是代碼太亂了,不行。

2,閉合标簽換行(黑科技)

inline-block間距問題

看起來還是影響代碼閱讀性。

3,父元素設定word-spacing或者letter-spacing為負的,子元素再重寫word-spacing或者letter-spacing屬性為正常值(0)。

inline-block間距問題

4,父元素設定font-size為0,子元素重新設定font-size為正常值。(我使用的這個方法,不會影響盒模型)

inline-block間距問題