web前端面试题（十四）之CSS 去掉inline-block元素间隙的几种方法?

2. CSS 去掉inline-block元素间隙的几种方法?

间隙是怎么来的:

间隙是由换行或者回车导致的;
只要把标签写成一行或者
标签直接没有空格，就不会出现间隙;

怎么去除?

方法1:
元素间的间隙出现的原因
是元素标签之间的空格，
把空格去掉间隙自然就会消失。

<div class="itlike">
  <span>撩课itlike</span><span>撩课itlike</span>
</div>

方法2:
利用HTML注释标签

<div class="demo">
    <span>撩课itlike</span><!-- 
    --><span>撩课itlike</span>
</div>

方法3:
取消标签闭合
<div class="demo">
    <span>撩课itlike
    <span>撩课itlike
    <span>撩课itlike
    <span>撩课itlike
</div>

方法4:
在父容器上使用font-size:0;可以消除间隙
<div class="demo">
    <span>撩课itlike</span>
    <span>撩课itlike</span>
    <span>撩课itlike</span>
    <span>撩课itlike</span>
</div>
.demo {font-size: 0;}