如何删除span、a、em等元素之间的空白
如何删除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 许可协议。转载请注明出处!