去除inline-block元素间的间隙
去除inline-block元素间的间隙一、什么是inline-block
inline-block 即内联块,在CSS的元素分类中可以分成三种：行内元素或者内联元素、块级元素、以及内联块元素。
内联块元素具有了内联元素以及块级元素的特性
（1）元素之间可以水平排列
（2）可以当做一个块级元素来设置各种的属性，例如：width、height、padding等。
例如
<li id="demo">
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
</li>
<style>
#demo span{
display:inline-block;
background:#ddd;
}
</style>
效果图
二、去除inline-block元素间的间隙的方法
方式一：移除标签间的空格
(1)、写法一
<li class="demo"> <span>我是一个span</span><span>我是一个span</span><span>我是一个span</span><span>我是一个span</span> </li>
(2)、写法二
<li class="demo"> <span>我是一个span </span><span>我是一个span </span><span>我是一个span </span><span>我是一个span</span> </li>
(3)、利用HTML注释标签
<li class="demo"> <span>我是一个span</span><!-- --><span>我是一个span</span><!-- --><span>我是一个span</span><!-- --><span>我是一个span</span> </li>
方式二、使用margin负值
margin负值的大小与上下文的字体和文字大小相关
<li class="space">
<a href="##">惆怅</a>
<a href="##">淡定</a>
<a href="##">热血</a>
</li>
<style>
.space a {
display: inline-block;
margin-right: -3px;
}
</style>
方式三、使用font-size:0
<li class="demo">
<span>我是一个span
<span>我是一个span
<span>我是一个span
<span>我是一个span</span>
</li>
<style>
.demo {font-size: 0;}
.demo span{
background:#ddd;
display: inline-block;
font-size: 14px; /*要设置相应的字号*/
}
</style>
对于Chrome, 其默认有最小字体大小限制，考虑到兼容性，需要取消字体大小限制，这样写：
<li class="demo">
<span>我是一个span
<span>我是一个span
<span>我是一个span
<span>我是一个span</span>
</li>
<style>
.demo {font-size: 0;-webkit-text-size-adjust:none;}
.demo span{
background:#ddd;
display: inline-block;
font-size: 14px; /*要设置相应的字号*/
}
</style>