inline-block元素間距

作項目過程當中發現元素設置爲inline-block後，彼此之間會有間距，有時候不是咱們想要的效果，這時候就須要將間距去除掉。

後來上網查了下，已有前人總結了很多好的方法。這裏主要借鑑了張鑫旭博客中介紹的一些方法。我在這裏總結一下。

現象：

1.以下代碼：

<span>首頁</span>
<span>聯繫咱們</span>
<span>關於咱們</span>
<span>新聞中心</span>
<span>網站地圖</span>

span{
  display:inline-block;
  width:100px;
  height:40px;
  line-height:40px;
  background-color:rgb(12,12,12);    
}

這個時候幾個導航之間會出現間距。有時候是不須要的。

2.以下代碼：

<input type='text' placholder='搜索'>
<button>搜索</button>

input,button{
  display:inline-block;
  outline:none;
}

這個時候input和button之間仍是會有間距，假如設計要求按鈕和表單牢牢挨着，那就是不理想的。

解決方案：

1.移除空格

元素間留白間距出現的緣由就是標籤段之間的空格，所以，去掉HTML中的空格，天然間距就木有了。

不過這樣的話，代碼可讀性可能比較差。

想要兼顧可讀性的話，能夠在標籤相接處不換行，在其餘位置換行。相似於：

    <span>
    導航1</span><span>
    導航2</span><span>
    導航3</span>

不一樣標籤有不一樣寫法，這裏能夠腦洞。

2.使用margin負值，margin負值能夠解決佈局中不少問題。這裏很少說。

至於margin負值的值具體是多少，張先生有另一篇文章，很詳細：

http://www.zhangxinxu.com/wordpress/2010/11/%E6%8B%9C%E6%8B%9C%E4%BA%86%E6%B5%AE%E5%8A%A8%E5%B8%83%E5%B1%80-%E5%9F%BA%E4%BA%8Edisplayinline-block%E7%9A%84%E5%88%97%E8%A1%A8%E5%B8%83%E5%B1%80/

3.標籤不閉合。

嚴格意義上來說，標籤不閉合是不符合HTML5規範的。不過因爲HTML是鬆散類型的文本標記語言，不閉合標籤在瀏覽器中可以正確的解析。在這種場景下，不閉合標籤可以實現要求，解決問題，也是一種思路。不過對於代碼強迫症來說，這是接受不了的。好比說我。

<span>導航1
<span>導航2
<span>導航3

4.使用font-size=0

前面提到，inline-block之間的空白是因爲代碼中的空格，而空格的大小，是受其周圍元素的字號影響。因此，能夠給父元素加一個屬性，font-size:0;在inline-block元素上設置真實的font-size

<div class='par'>
    <span>導航1</span>
    <span>導航1</span>
    <span>導航1</span>
</div>

.par{
  font-size:0;      
}
.par span{
  font-size:12px;  
}

 5.letter-spacing(字符間距)和word-spacing(單詞間距)

<div class='par'>
    <span>導航1</span>
    <span>導航1</span>
    <span>導航1</span>
</div>

.par{
  letter-spacing:-3px;      
}
.par span{
  letter-spacing:0;
}

.par{
  word-spacing:-6px; 
}
.par span{
  word-spacing:0; 
}

 

以上是我簡單總結。張鑫旭的博客中有詳細介紹。

原文地址

原文標題：去除inline-block元素間間距的N種方法

原文連接：http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/