span间隙

发表于 | 分类于 | |

最近做移动端项目时，经常会碰到span元素之间存在诡异的间隙问题。这种间隙会导致一些布局上的问题，下面是几种解决的方法。

例子

1
2
3
4
5
6
7
8
<div id="demo">
	<span>span元素</span>
	<span>span元素</span>
	<span>span元素</span>
</div>
<style type="text/css">
	#demo span {display: inline-block; background-color: #ccc;}
</style>

效果如下
图片

在上述例子中，定义为inline-block的元素之间会产生间隙，那要是不定义为inline-block呢？

1
2
3
4
5
6
7
8
<div id="demo">
	<span>span元素</span>
	<span>span元素</span>
	<span>span元素</span>
</div>
<style type="text/css">
	#demo span { background-color: #ccc;}
</style>

效果图
图片

上面例子中，对span元素不做任何处理，依然会存在间隙，那如果把span元素放在一行显示会是怎么样的效果？

1
2
3
4
5
6
<div id="demo">
	<span>span元素</span><span>span元素</span><span>span元素</span>
</div>
<style type="text/css">
	#demo span { background-color: #ccc;}
</style>

效果图
图片

可以发现，span元素之间的空隙消失了。说明这个间隙是由换行或者回车导致的，只要把标签写成一行就不会出现间隙，但是这种方法不太可靠，常常会因为一些因素失效。
下面介绍一下几种写法：
写法1：

1
2
3
<div id="demo">
	<span>span元素</span><span>span元素</span><span>span元素</span>
</div>

写法2：

1
2
3
4
5
<div id="demo">
	<span>span元素</span><span>
	span元素</span><span>
	span元素</span>
</div>

写法3：利用HTML注释标签

1
2
3
4
5
<div id="demo">
	<span>span元素</span><!--
	--><span>span元素</span><!--
	--><span>span元素</span>
</div>

写法4：取消标签闭合

1
2
3
4
5
<div id="demo">
	<span>span元素
	<span>span元素
	<span>span元素</span>
</div>

把span结束标签去掉，但需注意最后一个标签需要闭合。

写法5：把父级的font-size设为0,在子元素上设置相应的字体大小

1
2
3
4
5
6
7
8
9
<div id="demo">
	<span>span元素</span>
	<span>span元素</span>
	<span>span元素</span>
</div>
<style type="text/css">
	#demo {font-size:0;}
	#demo span { background-color: #ccc;font-size:14px;}
</style>

对于Chrome, 其默认有最小字体大小限制，考虑到兼容性，需要取消字体大小限制，这样写：

1
2
3
4
5
6
7
8
9
<div id="demo">
	<span>span元素</span>
	<span>span元素</span>
	<span>span元素</span>
</div>
<style type="text/css">
	#demo {font-size:0;-webkit-text-size-adjust:none;}
	#demo span { background-color: #ccc;font-size:14px;}
</style>