span标签间距 （实用）

逃离我推掉我的手 2023-06-17 09:56 74阅读 0赞

原文出处：https://www.cnblogs.com/chargeworld/p/10270515.html

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








1

2

3

4

<p>

<span>块1</span>

<span>块2</span>

</p>

　　

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

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








1

2

3

<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的啦。

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

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








1

2

3

4

5

6

7

8

9

10

11

<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
版权声明：本文为博主原创文章，转载请附上博文链接！

发表评论

表情：
评论列表 （有 0 条评论，74人围观）

还没有评论，来说两句吧...

相关阅读

    相关 HTML ＜span＞标签

    HTML 中的<span>标签被视为内联元素。它类似于 div 标记，但 div 标记特意用于块级元素，而 span 用于内联元素。它主要用于用户想要将内联元素分组到其代码结构

    Dear 丶Dear 丶/ 0 赞/ 24 阅读