目录
做页面时,如果用到inline-block
元素来布局,就无可避免都会遇到一个问题,就是inline-block
元素之间的间隙。这些间隙会导致一些布局上的问题,需要把间隙去掉。
1、标签写在一行,移除标签间的空格
<div class="demo">
<span>我是一个span</span><span>我是一个span</span><span>我是一个span</span>
</div>
2、利用HTML注释标签
<div class="demo">
<span>我是一个span</span><!--
--><span>我是一个span</span><!--
--><span>我是一个span</span><!--
--><span>我是一个span</span>
</div>
3、在父容器上使用font-size:0;可以消除间隙
<div class="demo">
<span>我是一个span
<span>我是一个span
<span>我是一个span
<span>我是一个span</span>
</div>
.demo {font-size: 0;}
.demo span{
background:#ddd;
display: inline-block;
font-size: 14px; /*要设置相应的字号*/
}