前言

做页面时，如果用到inline-block元素来布局，就无可避免都会遇到一个问题，就是inline-block元素之间的间隙。这些间隙会导致一些布局上的问题，需要把间隙去掉。

1、标签写在一行，移除标签间的空格

1
2
3
<div class="demo">
   <span>我是一个span</span><span>我是一个span</span><span>我是一个span</span>
</div>

2、利用HTML注释标签

1
2
3
4
5
6
<div class="demo">
    <span>我是一个span</span><!-- 
    --><span>我是一个span</span><!-- 
    --><span>我是一个span</span><!-- 
    --><span>我是一个span</span>
</div>

3、在父容器上使用font-size:0;可以消除间隙

1
2
3
4
5
6
<div class="demo">
    <span>我是一个span
    <span>我是一个span
    <span>我是一个span
    <span>我是一个span</span>
</div>
1
2
3
4
5
6
.demo {font-size: 0;}
.demo span{
     background:#ddd;
     display: inline-block;
     font-size: 14px; /*要设置相应的字号*/
}