关于在html中换行引起的空格问题及解决

html-css016

关于在html中换行引起的空格问题及解决,第1张

我在最近写html的时候,经常会碰到标签的换行,或者是内容的换行,在界面中是会出现空格的间隙。如:

页面显示会出现空格

解决方法:

效果:

HTML会把行内元素中的回车换行符转换为空格显示(如果是连续的多个回车换行符只会显示为一个空格),所以你会看到上面第一张图的 全国站 与后面的 [切换 之间的空隔比第二张图的要大。而估计你的city是有宽度限制的,第一张图中的文字中因为多了个空格超长了所以就换行了。

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

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

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

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

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