inline-block中清除间距

我们先来看个例子

 <style type="text/css">
    .container {
        border: 1px solid #ccc;
        /*font-size: 0px;*/
    }
    .content1 {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: blue;
    }
    .content2 {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: yellow;
    }
</style>

 <div class="container">
    <li class="content1"></li>
    <li class="content2"></li>
</div>

image.png

从上述图中，我们可以看到，明明我们没有设置content1和content2之间的间距，怎么会出现间隙呢？
这是因为两个元素display为inline-block，而inline-block相应的就会有font-size属性，虽然我们没有说明font-size的大小，但是浏览器会有默认的值,html代码中的标签换行就相当于字符

image.png

嗯，这里的font-size默认值就是16px。这样就产生了间距了，接下来我们要讨论的就是如何去除间距了。

在父元素设置font-size: 0

上述例子在container中添加个font-size的属性就可以去除间距了。如果觉得麻烦而整个代码中又有很多需要去除间距的地方，可以直接在body或者html中设置font-size: 0。
这样的方法的缺点在哪里?

1. 这个方法会在Android系统中会出现一些问题，有的甚至完全不能清除间距

2. 如果你用em来标记font，这种方式会导致子元素的font-size也为0，看看看。。

    .container {
        border: 1px solid #ccc;
        font-size: 0px;
    }
    .content1 {
        display: inline-block;
        width: 6em;
        height: 6em;
        background-color: blue;
    }
    .content2 {
        display: inline-block;
        width: 6em;
        height: 6em;
        background-color: yellow;
    }
   

然后就只剩一个2px的border而已了，当然，rem是个很好的解决办法。

html写成一行。。

emmmm，这样虽然可以直接去除空隙，但。。很明显不是什么可取的手段

自闭合标签？？

嗯，是可以的就如上面的例子，我们可以不用改动style，直接改动html。。

image.png
也可以达到清除间隙的效果，，然而，你首先得知道哪些是自闭合标签，像div这种就不是自闭合标签的。
常用的可以不用闭合的也就是img，p，li，br，input，其他的 大部分是很少用到或者是需要闭合的了。即使如此，写出来还是怪怪的，所以还是不推荐使用

• 使用margin负值
  这个方法相对来说好像比较多人用，一般来说是用-4px的外边距。当然，有时需要根据父元素的font-size来调整。但毫无疑问的是这个方式在ie6，ie7是有一些问题出现的。
  具体的一些浏览器的调整可以看张鑫旭的一篇文章
  “基于display:inline-block的列表布局”一文part 6的统计表格