关于html中空格的问题解决-html教程-PHP中文网

关于html中空格的问题解决

黄舟

发布： 2017-07-22 09:37:37

原创

1980人浏览过

<h2><span class="glyphicon glyphicon-send"></span> 联系我们</h2>
<h2><span class="glyphicon glyphicon-send"></span> 联系我们</h2>
<h2><span class="glyphicon glyphicon-send"></span> 联系我们</h2>

登录后复制

上边三种写法图标和文字的距离为什么都不一样？和inline-block的图标和换行有关系吗？如果我换5行

<h2><span class="glyphicon glyphicon-send"></span> 联系我们</h2>
<h2><span class="glyphicon glyphicon-send"></span> 联系我们</h2>

登录后复制

上边两种效果是一样的，为什么呢？

<h2><span class="glyphicon glyphicon-send"></span>   联系我们</h2>

登录后复制

nasp和实际打出来的空格效果是一样的为什么还要用nbsp呢？

<h2><span class="glyphicon glyphicon-send"></span>  联系我们</h2>
<h2><span class="glyphicon glyphicon-send"></span>       联系我们</h2>

登录后复制

像这种1个空格1个nbsp和5个空格1个nbsp的效果也一样是为什么？

浏览器解析html文档时, 多个相连的空格,回车或者TAB会直接解析成一个...

立即学习“前端免费学习笔记（深入）”；

内联元素(span,b,a 等等之类的) 之间的空格或者回车会被解析成空格, 所以第一段代码相当于:

 联系我们
  联系我们
<h2><span class="glyphicon glyphicon-send"></span>   联系我们</h2>

登录后复制

通常情况下，HTML 会裁掉文档中的空格。假如你在文档中连续输入 10 个空格，那么 HTML 会去掉其中的9个。如果使用，就可以在文档中增加空格。

nbsp是英文Non-Breaking SPace的缩写，可以直接翻译成“不被折断的空格”。HTML中使用表示1个空格字符（英文的1个空格字符），1个中文汉字占2个英文字符，也就是要用两个。

DOM 中的空白符会让处理节点结构时增加不少麻烦。
在Mozilla 的软件中，原始文件里所有空白符都会在 DOM 中出现（不包括标签内含的空白符）。这样的处理方式有其必要，一方面编辑器中可迳行排列文字、二方面 CSS 里的 white-space: pre 也才能发挥作用。
如此一来就表示：
-有些空白符会自成一个文本节点。
-有些空白符会与其他文本节点合成为一个文本节点。

Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。

以上就是关于html中空格的问题解决的详细内容，更多请关注php中文网其它相关文章！