引言
我现在仍然记得作为一个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
author: 燕睿涛
email: ritoyan@163.com
