简单空间和 的区别

Question

谁能告诉我简单空格（用键盘空格键创建）和 （HTML 不间断空格）有什么区别？

我问这个是因为当我 在我的页面上同时使用（简单空格和）时，它们的行为会有所不同。

在我的 Web 应用程序中，当我将一个简单的空格（使用键盘空格键）放入 a 时span，它没有高度或宽度（0px），但是当我放入它时&nbsp，span它具有高度和宽度。

当我用div标签尝试同样的事情时，发生了同样的问题。

在jsfiddle中看到

在 jsfiddle 中你可以看到，当我使用一个简单的空间时，元素没有高度（它总是0px），但是当我使用时 ，它有一个高度。

Answer 1

nbsp代表不间断空间，主要有两个区别：

1. 使用普通的空白字符，如果不再有水平空间，内容将被环绕。所以，foo bar可能被渲染为

    foo
    bar 
   

   而foo bar将始终呈现为

   foo bar
   

   如果没有足够的水平空间，内容就会溢出。

2. 浏览器可以决定在 HTML 元素内容的开头或结尾修剪空白字符。这在规范中描述：

   为了避免 SGML 换行规则的问题和现有实现之间的不一致，作者不应该依赖用户代理在开始标签之后或结束标签之前立即渲染空白。

   这意味着，<div> foo bar </div>由浏览器解释为<div>foo bar</div>，因此<div> </div>作为<div></div>（即，作为一个空的元素）。