HTML5學堂（碼匠）：變態的inline-block帶來的bug。span之間的空隙，到底是什麼？display:inline-block的元素雖然能夠處於同一行，但是很變態的是它們之間出現了空格，如何處理？（例如在浮動元素居中當中，我們必須使用display:inline-block），本文給大家詳細介紹inline-block。

span之間的空隙，到底是什麼？

display:inline-block的元素雖然能夠處於同一行，但是很變態的是它們之間出現了空格，如何處理？（例如在浮動元素居中當中，我們必須使用display:inline-block）

實例：

span之間的空隙，到底是什麼？ - 碼匠

如圖：

span之間的空隙，到底是什麼？ - 碼匠

左側有明顯的空隙

原因：

內聯元素在html中換行的同時會產生一個文本節點，可以使用負值的margin-right或者letter-spacing +word-spacing來解決這個問題，或者使用float，不考慮chrome可使用font-size基本解決。

浮動之後：

inline-block用於塊對象的橫向排列（如圖片組），其有著一些float不可替代的作用（如不錯位、可垂直居中等），但在實際應用中，還是存在一個很糾結的弊端——有縫

行元素的使用方法：

.father { font-family:'微軟雅黑'; font-size:12px;}

Advertisements

.father span { display:inline-block; background:#f60;width:100px; height:100px; margin-right:-0.5em;}

對象為塊對象時：

對象為塊對象時 - 碼匠

有人如果在此問，我明明轉化成行內元素了（IE6），但是，為何寬高還有效呢？這是由於通過 zoom:1 觸發了hasLayout，使其可以設置寬高。

該bug與文字的字體大小相關，這裡之所以不直接使用font-size:0，然後在子對象上再進行大小恢復，其主要原因在於即使這樣設置了，在safari、chrome以及為塊對象時的ie6和ie7當中依舊存在1px的問題，需要單獨hack。

小結

1. 縫隙的寬度與文字大小相關，縫隙就如同一個文本節點，字越大，縫隙也就越大。

2. 這個文本節點是由於換行產生的，故，如果span和span之間或li與li之間不存在換行，那就沒必要這麼羅嗦了。

3.示例中採用了font-family:』微軟雅黑』（也可以是simsun-宋體），這是因為在等寬字體的情況下，各瀏覽器對這個文本節點的寬度就很一致了：0.5em

HTML5學堂（碼匠） - https://weixin.mj216.com/