inline-block元素之間的空隙的消除方法

NO IMAGE

在CSS佈局中,如果我們想要將一些元素在同一行顯示,其中的一種方法就是把要同行顯示對的元素設定display屬性為inline-block。但是你會發現這些同行顯示的inline-block元素之間經常會出現一定的空隙。

元素被當成行內元素排版的時候,元素之間的空白符(空格、回車換行等)都會被瀏覽器處理,根據white-space的處理方式(預設是normal,合併多餘空白),原來HTML程式碼中的回車換行被轉成一個空白符,所以元素之間就出現了空隙。這些元素之間的間距會隨著字型的大小而變化,當行內元素font-size:16px時,間距為8px。

解決方法:

1、刪去元素之間的空白

<ul> 
<li> 
one</li><li>
two</li><li> 
three</li> 
</ul> 
<!-- or --> 
<ul> 
<li>one</li  
><li>two</li  
><li>three</li> 
</ul> 
<!-- or -->
<ul> 
<li>one</li><!--  
--><li>two</li><!--  
--><li>three</li> 
</ul>

2、 在父元素中設定font-size: 0,然後在子元素上重置正確的font-size。

缺點:inline-block元素必須設定字型,不然行內元素中的字型不不顯示。

3、使用margin-right負值

缺點:元素之間間距的大小與上下文字型大小相關;並且同一大小的字型,元素之間的間距在不同瀏覽器下是不一樣的,如:font-size:16px時,Chrome下元素之間的間距為8px,而Firefox下元素之間的間距為4px。所以不同瀏覽器下margin-right的負值是不一樣的,因此這個方法不通用。

注意:當marigin-right使用相對單位em來表示時,Chrome下可以正常去除間距,而Firefox下元素之間有重疊。

4、為inline-block元素新增樣式float:left

5、使用display:table和word-spacing(最優的方法)

.box{
display:table;  /* 調教webkit*/
word-spacing:-1em;/*其他瀏覽器*/
}

6、使用letter-spacing

優點:因為使用了letter-spacing相對單位em表示距離,所以不需要根據字型大小改變程式碼來去除元素間距。

.box{
letter-spacing: -0.5em;
}
.box div{
letter-spacing: 0;
}

7、使用word-spacing

優點:因為使用了word-spacing相對單位em表示距離,所以不需要根據字型大小改變程式碼來去除元素間距。

.box{
word-spacing: -0.5em;
}