span标签间距
最近在做的一个项目里面碰到这么一个问题:
<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
版权声明:本文为博主原创文章,转载请附上博文链接!