移除行块级元素之间的空格（译文）

引言

我如今仍然记得做为一个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: ritoyan@163.com