首页 > 代码库 > Html中代码换行造成空格间距的问题

Html中代码换行造成空格间距的问题

Html中代码换行造成空格间距的问题解析

解决方法:

一、简单粗爆不换行

写代码的时候不要换行,input等在一行输写,那么将解决该问题。但是代码就变得不再那么容易好看。

二、设置父级块的字体大小为0

这样也能解决问题,代码也好看,但是当你设置了父级的字体大小为0时,你里面又要其它字体要显示,可能就得加span等标签去包裹它,并且重新设置字体大小。
三:设置margin-left为-3象素

使得该元素基于原来的位置向左偏移三个象素,也就看不出有空隙了。


对于html内置的内联级标签以及表单元素标签,源代码中连续几个内联级标签中的换行在浏览器中会被解释为一个空格。

包括ie和ff。而这个空格是会被当作一个空白节点(nodeType等于3的节点,就是文字节点)。

对于html内置的块级标签使用了display:inline;则没上述问题。

对于html内置的块级标签之间的换行,ff会当作一个空白节点(用js可以获取到),ie则会忽略掉这个换行。

这个换行在ie和ff的页面上并无任何影响,不会出现空格。

Html中代码换行造成空格间距的问题