移除行塊級元素之間的空格（譯文）

引言

我現在仍然記得作為一個IE6時代的初級開發者拼命的渴望IE擁有display: inline-block;這個屬性。當我們想控制間距和填充在inline元素兒不用block and float的時候，inline-block這個屬性是及其的有用。
然而，使用inline-block的時候有一個問題，視覺上兩個元素之間會出現空白。
有很多辦法移除這些惱人的空白

方法 0

唯一一個百分之百解決這個問題的方案是這樣：不要在這些元素的源碼之間出現空白。

<style type="text/css">
ul,li{
  margin: 0;
  padding: 0;
}
li{
  list-style: none;
  display: inline-block;
  border: 1px solid black;
  padding: 2px;
}
</style>
<ul><li>Item</li><li>Item</li><li>Item</li></ul>

下面是效果：

當然了，這個維護起來比較麻煩，但他很實用、和邏輯，最重要的是比較可靠。

方法 1

最好的空白解決方案：設置行區塊元素的父元素font-size: 0。因此如果你有一個

元素包裹了一堆
• 元素，你可以這么做。

  <style type="text/css">
  ul,li{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
    display: inline-block;
    border: 1px solid black;
    padding: 2px;
  }
  .inline-block-list{
    font-size: 0;
  }
  .inline-block-list li{
    font-size: 14px;
  }
  </style>
  <ul class="inline-block-list">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
  

  這種情況一般情況下和方法 0是一樣的結果，不過在IE8中，如果給行塊級元素設置了position:absolute，這個會導致一個嚴重的問題，頁面直接就是全部空白了。

  方法 2

  這種方法有點取巧的意思，但仍然可以用。在行塊元素之間使用HTML注釋，這個原理也是在元素源碼之間沒有空格

  <style type="text/css">
  ul,li{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
    display: inline-block;
    border: 1px solid black;
    padding: 2px;
  }
  .inline-block-list{
    font-size: 0;
  }
  .inline-block-list li{
    font-size: 14px;
  }
  .three{
    position: absolute;
    margin-left: 20px;
  }
  </style>
  <ul class="inline-block-list">
    <li>Item</li><!--
    --><li>Item</li><!--
    --><li class="three">Item</li>
  </ul>
  

  用一個單詞形容這個。。。流氓（gross），兩個單詞形容這種方法。。。真流氓（really gross)。用三個單詞。。。就是——你可以使用它（you get it）。他可以正常的顯示。

  方法 3

  和方法 2類似，這個方法也有點令人遺憾。你可以利用行塊元素的靈活性，用負的間距抵消空白

  <style type="text/css">
  ul,li{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
    display: inline-block;
    border: 1px solid black;
    padding: 2px;
  }
  .inline-block-list li{
    margin-left: -4px;
  }
  </style>
  <ul class="inline-block-list">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
  

  這是一個很差勁的方案，你必須計算這個負間距是多少，有時候還會有不可預料的空白。所以，盡量避免使用這種來解決行塊元素之間的空白。

  方法 4

  另外一個基於HTML的hack解決方案就是——只需要將閉合標簽>放到下一個標簽的開始：

  <style type="text/css">
  ul,li{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
    display: inline-block;
    border: 1px solid black;
    padding: 2px;
  }
  .inline-block-list{
    font-size: 0;
  }
  .inline-block-list li{
    font-size: 14px;
  }
  </style>
  <ul class="inline-block-list">
    <li>Item</li
    ><li>Item</li
    ><li>Item</li>
  </ul>
  

  跟HTML注釋這種方式相比，沒有那么難看，但我知道，我可以移除空白，但沒有去考慮這些空白為什么會存在。

  所有的這些解決方案沒有一個是完美的，唯一可以選擇的在HTML中不要使用空格和縮進也是一個不太好的方案。這不是告訴你“注意使用什么方案”，因為inline-block仍然非常的有用，但當開發者使用它的時候知道如何處理空白非常的重要。

  方法 my

  我的方法是使用浮動，這個在IE7中也是ok的，前面的這些方法在IE系列中某些低版本可能會失效（inline-block不起作用）

  <style type="text/css">
  ul,li{
    margin: 0;
    padding: 0;
  }
  ul:after{
    content: '.';
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
  }
  li{
    list-style: none;
    display: inline-block;
    border: 1px solid black;
    padding: 2px;
    float: left;
  }
  </style>
  <ul class="inline-block-list">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
  

  LAST

  原文地址：
  https://davidwalsh.name/remove-whitespace-inline-block

  author: 燕睿濤
  email: [e-mail]