inline和inline-block的間隙問題

咱們在前端佈局的時候，會偶爾發現，在具備inline/inline-block屬性的元素間存在一小段間隙，網上有些文章說這個間隙是6px，但我以爲應該是一個空格的寬度。

這裏以inline-block(IE六、IE7不支持，也就是存在兼容問題)爲例：

下面是一些代碼及其相應的效果圖：

CSS:

span{
        background:red;
        display:inline-block;
}

HTML:

<span>你好</span><span>你好</span><span>你好</span><span>你好</span>

效果圖：

若是隻更改HTML部分爲

<span>你好</span><span>你好</span>
<span>你好</span><span>你好</span>

則效果圖：

能夠看到中間多出了一個小間隙，這個間隙就是由換行產生的。

若是同時又更改CSS部分，設置font-size爲一個比較大的值

*{
    font-size:36px;
}
span{
        background:red;
        display:inline-block;
}

 

咱們有下圖

能夠看到間隙變大了。

若是咱們把HTML部分換行替換成空格，能夠獲得上圖同樣的效果

因而可知，inline/inline-block之間的間隙確實由換行符產生，其大小爲一個空格寬度（這裏要說明一下，這個空格寬度是指相應父元素的空格寬度）。

附加：inline-block兼容問題

要解決inline-block的兼容問題，首先要了解兼容問題產生的緣由。

一、IE六、IE7不識別inline-block但能夠觸發塊元素。

二、其餘主流瀏覽器都支持inline-block。

解決方法：

一、兼容IE六、IE7:首先設置inline-block觸發塊元素，使其具備layout屬性，其次設置inline，此時layout屬性不會消失。或者設置inline，而後再設置zoom:1觸發layout。

二、兼容全部主流瀏覽器：

display:inline-block;

*display:inline;

*zoom:1;