說一說inline-block的奇葩之處

今天本來想聊一下margin和padding，但是當我給div加了一個display:inline-block之后，發現一個問題：

.box_demo{border: 1px solid #333;width: 80px;display: inline-block;}

<div class="box_demo">
    box1
</div>
<div class="box_demo">
    box2
</div>

 

發現沒有，中間赫然有着4px的間距！！之前居然一直都沒有注意到！！！

我想着是不是只有block元素才有的問題，看了一下inline元素，依然存在這個問題，這個引起了我的注意，在網上搜羅了一番，漸漸發現，這確實是一個坑。

 

稱      號：“inline-block元素間間隙問題”。

現      象：如上。

產生原因：換行、空格導致。

解決辦法：（1）去掉換行；

　　　　　　　  優點：此解法so easy；缺點：代碼潔癖者哭了；

　　　　　（2）使用負margin值；

　　　　　　     優點：此解法so easy；缺點：字體大小不同，他們的間隙也不同，到底該負margin多少 %>_<%；

   　　　　（3）使用font-size:0；

CSS：

.wrap{font-size: 0;}
.box_demo{border: 1px solid #333;
                  width: 80px;
                  display: inline-block;
                  font-size: 16px;}            

HTML：

<div class="wrap">
    <div class="box_demo">
        box1
    </div>
    <div class="box_demo">
        box2
    </div>
</div>

截圖：

解鈴還須系鈴人，既然這個間隙是由於空格等文本類的問題產生的，那好，我讓你的字體大小為零，然后讓該顯示的字體還設置為16px，間隙就不見了。

　　　　　　     優點：此解法so easy；缺點：可能會存在一些兼容性問題；

 

看到這里，關於這個奇葩問題的所有核心內容以就完了，你又成功的識破了一個坑，並知道如何填補它，如果想繼續深一步了解，可以繼續往下看。

 

》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

 

其實這個問題還可以圍繞着這個“由於文本產生的問題”，還可以有其他解法：

比如：（1）使用letter-spacing；

　　　　     修改上述CSS：

.wrap{letter-spacing: -4px;}
.box_demo{border: 1px solid #333;
                width: 80px;
                display: inline-block;
                letter-spacing: 0;}

　　　　　　優點：此解法so easy；缺點：不兼容（Opera瀏覽器下需設置為：-8px）；

　　　（2）使用word-spacing;

　　　　　　方法同上，只用把letter改為word即可；

　　　　　　優缺點同上；

還有一個非常重要的問題，上述解法對於低於IE7的兼容性，有興趣的可以點擊下邊的鏈接：

http://demo.doyoe.com/css/inline-block-space/