span i等行内元素之间出现的诡异间隔

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

one two

在“one”和“two”之间存在着一个大概3em的空白…图就不上了

这明显不符合预期…

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

onetwo

原因在于 行内元素之间在换行时会产生一个换行符号,然后会占用一定的宽度…

同理 i 之类的行内元素也是会存在一样的问题

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

/**********更新/

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

所以有三种解决方法:

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

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

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

所以解决方案就是:将p的font-size设为0,然后对应的字体重新设置

ps:江湖偏方,将span元素设置浮动,间隙瞬间没有啦!

综上所述:

1、span标签较短,可直接将标签写在一行,简单粗暴;

2、标签较长,使用font-size:0去做

3、保险方案使用js字符串拼接,高、大、上!

你可能感兴趣的:(java开发类,span标签之前空格去除)