javascript - <p> 或 <span> 没有字符时，如何提供默认字体高度或内容？

Question

这是从一个与此处类似的问题开始的: HTML <p> and <span> questions 。

以 3 结尾...我想了解为什么会发生以下情况。从这个例子开始:

A <p> element without any special CSS rule on it has no text when the page is loaded, therefore height:0. Due to javascript operations in the page, it starts having characters, thus the height is set to the default font-size, which allow us to see the text.

1. 我如何确保这个 <p> 始终具有相同的高度(里面有或没有文本)？

2. 为什么在宽度上使用 em 会影响 <p> 而不是像这样的 <span>:

p,span {width: 1em}

<p>this is a paragraph</p>
<span>this a span</span>

1. 虽然我知道在 W3C 中 a " span element is a generic wrapper for phrasing content that by itself does not represent anything. ，但我的意图是让它代表某种东西......而且由于它在段落中的使用如此频繁，为什么 CSS 不能像影响 <p> 那样影响它的高度/宽度？

我正在用我想出的答案回答第一个问题，但我没有将其标记为已接受 - 我正在寻找一个答案，其中包含证明使用特定解决方案的理由。

只有在出现问题或有人为此提出具体建议时，我才会编辑我的问题/答案。

Answer 1

问题二

p 的宽度行为与 span是由于 width 的 CSS 规范属性(property)。

width不适用于非替换内联元素( span )，所以 p作为 block 级元素，采用宽度值。

请注意，如果您申请 display: inline-block到 span , 然后识别宽度，因为内联 block 不是不可替换的内联元素。

引用:http://www.w3.org/TR/CSS21/visudet.html#the-width-property

问题三

HTML 提供了两个通用的、 Vanilla 味的元素，div这是一个 block 级元素，span这是一个内联元素。 span可以在任何元素中使用，无论是 p , li , td , i等等。如果你想要 span嵌套在 p 中要具有特定的样式，您可以定义特定的 CSS 规则以启用所需的样式。如果你想要p比如宽度、填充和边距的行为，那么你可以指定 display: inline-block . HTML 规范没有指定通用的内联 block 元素，可能是因为规范组的任何成员都认为不需要它。

请记住，HTML 元素的默认样式取决于浏览器，因此理论上，浏览器的默认样式表可能有一个规则 p span ，但据我所知，这样的实现并不存在。

问题一

防止空p标签从折叠到零高度，我会使用 :after用于插入不间断空格的伪元素(   的十六进制代码为 0xa0 )。

请注意，由于 span是内联元素，它的高度不会折叠为零，因为内联非替换元素的高度由 line-height 决定。属性( height 被忽略)，因此您不需要添加不间断空格，除非您希望空白具有非零宽度。

p, span {
  border: 1px dotted blue;
}
p:after, span:after {
  content: '\a0';
}

<h4>Empty p</h4>
<p></p>
<p>p tag with text.</p>

<h4>Empty span</h4>
<span></span>
<span>span tag with text.</span>