真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子:
<input /> <input type="submit" />
我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题:
.space a {
display: inline-block;
padding: .5em 1em;
background-color: #cad5eb;
}
<div class="space">
<a href="##">惆怅</a>
<a href="##">淡定</a>
<a href="##">热血</a>
</div>
这种表现是符合规范的应该有的表现,不过,这类间距有时会对我们布局,或是兼容性处理产生影响,需要去掉它,该怎么办呢?
下面介绍几种简单常用的方法:
使用font-size:0
这个方法,基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器,就是Chrome, 其默认有最小字体大小限制,因为,考虑到兼容性,我们还需要添加:
类似下面的代码:
.space { font-size: 0; -webkit-text-size-adjust:none; }
使用letter-spacing
.space { letter-spacing: -3px; } .space a { letter-spacing: 0; }
使用word-spacing
li { display:inline-block; background: orange; padding:10px; word-spacing:0; } ul { width:100%; display:table; /* 调教webkit*/ word-spacing:-1em; }