去除inline-block元素间间距的N种方法
杰拉斯 | 时间:2012-06-15, Fri | 4,630 views前端开发
一、现象描述
真正意义上的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>
您可以狠狠地点击这里:inline-block元素间间距demo
这种表现是符合规范的应该有的表现(如果有人认为是bug就太()ay ()oy 了)。
不过,这类间距有时会对我们布局,或是兼容性处理产生影响,需要去掉它,该怎么办呢?以下展示N种方法(欢迎补充)!