去除inline-block元素间间距的方法

当我们用inline-block代替float的时候，会出现元素之间有空隙的情况，如图

再这里我就列举几种简单的办法：

1、元素之间出现空隙是因为标签段之间的空格，所以只要去掉标签端之间的空格即可。

//结构一
<div class="body" >
            <div class="box">   
            </div><div class="box">
            </div><div class="box">
            </div><div class="box">
            </div><div class="box">
            </div>
        </div>
//结构二
<div class="body" >
            <div class="box"></div
            ><div class="box"></div
            ><div class="box"></div
            ><div class="box"></div
            ><div class="box"></div>
        </div>
//结构三
<div class="body" >
            <div class="box"></div><!--
            --><div class="box"></div><!--
            --><div class="box"></div><!--
            --><div class="box"></div><!--
            --><div class="box"></div>
        </div>

2、子元素设置margin：-4px; 这种解决方法并不完美，如果你的父元素设置的字号不一样，可能你的“-4px”就不能解决问题。况且在Chrome中你需要设置margin:-8px;才能实现同等的效果。

.box{
    width: 50px;
    height: 50px;
    display: inline-block;
    background: lightcoral;
    margin: 0 auto;
    margin-right:-8px;
}

3、设置父元素字体为 0 。

.body{
    width: 300px;
    font-size: 0;
     /*-webkit-text-size-adjust:none;*/
    background: lightblue;
}

暂时就写这些以后遇到再慢慢补充。