inline-block元素之间的空隙的消除方法

版权声明：未经本人允许，请勿转载 https://blog.csdn.net/bigbear00007/article/details/81781127

有一次做项目的时候想实现行内块居中。 提到行内块那么大家都会想到设置display属性为inline-block。
但是你会发现这些同行显示的inline-block元素之间经常会出现一定的空隙。 于是借鉴各位网友的强大力量结合自身感悟，总结一番，分享给大家。

解析：
元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。

解决方法：
1、删去元素之间的空白

<ul> 
    <li> 
    one</li><li>
    two</li><li> 
    three</li> 
</ul> 

或者：
<ul> 
    <li>one</li  
    ><li>two</li  
    ><li>three</li> 
</ul>

或者：
<ul> 
     <li>one</li><!--  
     --><li>two</li><!--  
     --><li>three</li> 
 </ul>

2、 在父元素中设置font-size: 0，然后在子元素上重置正确的font-size。
缺点：inline-block元素必须设定字体，不然行内元素中的字体不不显示。

3、使用margin-right负值
缺点：元素之间间距的大小与上下文字体大小相关；并且同一大小的字体，元素之间的间距在不同浏览器下是不一样的，如：font-size:16px时，Chrome下元素之间的间距为8px,而Firefox下元素之间的间距为4px。所以不同浏览器下margin-right的负值是不一样的，因此这个方法不通用。

注意：当marigin-right使用相对单位em来表示时，Chrome下可以正常去除间距,而Firefox下元素之间有重叠。

4、为inline-block元素添加样式float:left

5、使用display:table和word-spacing（最优的方法）

.box{
    display:table;  /* 调教webkit*/
    word-spacing:-1em;/*其他浏览器*/
}

6、使用letter-spacing
优点：因为使用了letter-spacing相对单位em表示距离，所以不需要根据字体大小改变代码来去除元素间距。

.box{
     letter-spacing: -0.5em;
}
.box div{
     letter-spacing: 0;
}

7、使用word-spacing
优点：因为使用了word-spacing相对单位em表示距离，所以不需要根据字体大小改变代码来去除元素间距。

.box{
   word-spacing: -0.5em;
}