如何删除span、a、em等元素之间的空白

作者：Jasmine - 2016年07月11日

如何删除span元素之间的空白:

有时候可能会发现span元素之间会有空白，当然有时候这个空白是必须的，但是大多数情况下并非我们真正需要的。

先看一段代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>CSS教程-蚂蚁部落</title>
<style type="text/css">
span{background-color:red}
</style>
</head>
<body>
<span>蚂蚁部落</span>
<span>蚂蚁部落</span>
<span>蚂蚁部落</span>
</body>
</html>

由以上代码的运行结果可以看出，span元素之间有空白的地方。

不光是span元素会出现这种情况，只要是内联元素就会有此类的状况发生，块级元素转换为内联元素也会发生这样的情况，下面就介绍一下就和解决此问题，希望对大家有所帮助。

一.解决方案一:

删除内联元素之间的空格，下面是最笨的方法:

<span>蚂蚁部落</span><span>蚂蚁部落</span><span>蚂蚁部落</span>

二.解决方案二:

给他们包裹一个父元素，然后将父元素的字体大小设置为0，代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>CSS教程-蚂蚁部落</title>
<style type="text/css">
div{font-size:0px;}
span{
  background-color:red;
  font-size:14px;
}
</style>
</head>
<body>
<div>
  <span>蚂蚁部落</span>
  <span>蚂蚁部落</span>
  <span>蚂蚁部落</span>
</div>
</body>
</html>

或者在样式上加上float：left，但是这个有个不好就是，你如果文字需要居中的话就不行。。

如果上述你还有更好的方法可以提出来。

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/469

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！