如何删除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.html

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


 请勿发布不友善或者负能量的内容。审查将对发布广告等违规信息进行处罚!