处理非破坏空间:<p> </p>与<p> </p>

时间:2012-09-05 10:41:07

标签: html css space

&nbsp;是一个非中断空格,表示没有换行的空白区域。

如果我使用

<p>&nbsp;</p>

我在两个段落之间有一个空格(更大的休息点)。如果我使用

<p> </p>

我在这两段之间只有一条新线(没有休息)。为什么呢?

3 个答案:

答案 0 :(得分:68)

在HTML中,只包含正常空白字符的元素被视为空。仅包含普通空格字符的段落将具有零高度。不间断空格是一种特殊的空白字符,不被认为是无关紧要的,因此它可以用作非空段落的内容。

即使您考虑段落的CSS边距,由于“空”段落的高度为零,其垂直边距将为collapse。这导致它没有高度和没有边距,使它看起来好像从来没有。

答案 1 :(得分:5)

解决方法怎么样? 在我的例子中,我在一个jQuery变量中获取了textarea的值,并将所有 "<p>&nbsp" 更改为 <p class="clear"> 并清除了类以具有一定的高度和保证金,如下例所示:

<强>的jQuery

tinyMCE.triggerSave();
var val = $('textarea').val();
val = val.replace(/<p>&nbsp/g, '<p class="clear">');

然后使用新的val将数据保存到数据库中。

<强> CSS

p.clear{height: 2px; margin-bottom: 3px;}

你可以调整身高和高度保证金。 因为'p'是 display:block 元素。它应该给你预期的输出。

希望有所帮助!

答案 2 :(得分:0)

如果我理解你的问题,这应该有效

&amp; emsp-the em space;这应该是一个非常宽的空间,通常多达四个真实空间。 &amp; ensp-the en space;这应该是一个有点宽的空间,大致是两个常规空间。 &amp; thinsp-这将是一个狭窄的空间,甚至比常规空间更窄。

资料来源:http://hea-www.harvard.edu/~fine/Tech/html-sentences.html