span标签间距

Posted 2021-02-03 chargeworld

最近在做的一个项目里面碰到这么一个问题：

<p>
<span>块1</span>
<span>块2</span>
</p>

　　

在“块1”和“块2”之间存在着一个大概3em的空白...图就不上了
这明显不符合预期....

最后发现：当这两个span写在一行...问题就解决了...

<p>
<span>块1</span><span>块2</span>
</p>

　　

原因在于 行内元素之间在换行时会产生一个换行符号，然后会占用一定的宽度...
同理 i s之类的行内元素也是会存在一样的问题

并且这个宽度是小于一个空格的...

 

在此记录一下这个浪费了我一天时间的问题- -！歌以咏志

 

=======7月8日更新=======

之前的解决方法是，把所有的span都写到一行，这当然是最稳妥的做法，但是带来的麻烦肯定是有的...这意味着需要书写一行特别特别长的代码，按照代码规范来看，一行代码是最好不要超过50还是200个字符来着....（具体请参阅efe代码规范）

所以有三种解决方法：

1、在js里拼接好字符串后再通过innerhtml方法显示出来

2、这个空白貌似确实就是3em大小，所以只要设置span的margin-right: -3em即可，亲测有效，唯一不爽的地方是，如果行内存在i s em之类其他的元素，每个元素都得设置一下margin-right，并不是很爽= =！

3、换行符号的宽度是由所在标签的字体大小有关，以上面的代码为例，p的font-size越大，块1与块2之间的空白就越宽，反之则越小。

所以解决方案就是：将p的font-size设为0即可。

 

但是，忘了是在哪里看到的一篇文章表示，有的浏览器不支持font-size: 0，目测应该是万恶的旧版IE... 所以在这种情况下，选择js拼接是比较好的，但是如果做的HTML5开发，特别是Web App开发，那移动端的浏览器肯定是支持font-size 0的啦。

 

=======再补充========

这种方法算是奇技淫巧....

<p>
<span>块1</span
><span>块2</span
><span>块3</span>
</p>

<p>
<span>块1</span><!--
--><span>块2</span><!--
--><span>块3</span>
</p>

　　

半夜睡不着在网上看到的...这样奇奇怪怪的写法也是能够保证这三个span都在同一行里...
撒由那拉~
---------------------
作者：clarkt
来源：CSDN
原文：https://blog.csdn.net/clarkt/article/details/46363909
版权声明：本文为博主原创文章，转载请附上博文链接！