间隙是由换行或者回车导致的,只要把标签写成一行或者标签直接没有空格就不会出现间隙。
移除inline-block元素间隙方法
(1)移除标签间的空格
元素间的间隙出现的原因是元素标签之间的空格,把空格去掉间隙自然就会消失。来看以下几种写法:
*写法一:
<div class="demo"> <span>我是一个span</span><span>我是一个span</span><span>我是一个span</span><span>我是一个span</span> </div>
*写法二:
<div class="demo"> <span>我是一个span </span><span>我是一个span </span><span>我是一个span </span><span>我是一个span</span> </div>
*写法三:利用HTML注释标签
<div class="demo"> <span>我是一个span</span><!-- --><span>我是一个span</span><!-- --><span>我是一个span</span><!-- --><span>我是一个span</span> </div>
(2)取消标签闭合
<div class="demo"> <span>我是一个span <span>我是一个span <span>我是一个span <span>我是一个span </div>
.demo span{
background:#ddd;
display: inline-block;
}
把span标签的结束标签去掉,这样间隙就没有了。为了兼容IE6/IE7,最后一个标签需要闭合。
<div class="demo"> <span>我是一个span <span>我是一个span <span>我是一个span <span>我是一个span</span> </div> .demo span{ background:#ddd; display: inline-block; }
(3)使用font-size:0;
在父容器上使用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; /*要设置相应的字号*/ }
对于Chrome, 其默认有最小字体大小限制,考虑到兼容性,需要取消字体大小限制,这样写:
<div class="demo"> <span>我是一个span <span>我是一个span <span>我是一个span <span>我是一个span</span> </div> .demo {font-size: 0;-webkit-text-size-adjust:none;} .demo span{ background:#ddd; display: inline-block; font-size: 14px; /*要设置相应的字号*/ }
但是这种方法不兼容safari,可以使用letter-space:-4px来兼容
(4)使用负的margin;
为了兼容chrome,有些使用-0.25em来解决
(5)jq的方法,通过改变nodeType来决定;
HTML Markup
<ul class="removeTextNodes"> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> </ul>
CSS Code
ul { list-style: none outside none; padding: 10px; background: green; text-align: center; font-size: 12px; } ul li { display: inline-block; *display: inline; zoom: 1; background: orange; padding: 5px; }
jQuery Code
$('.removeTextNodes').contents().filter(function() { return this.nodeType === 3; }).remove();
其他知识点:
在IE8-9,火狐,safari,chrome(在chrome下为8px)中,inline-block的元素之间存在“4px”的空白。