当或没有字符时，如何提供默认字体高度或内容？

Question

这是从一个与此处类似的问题开始的： HTML and questions.

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

A  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.

我如何保证这个  始终具有相同的高度（里面有或没有文字）？
为什么在宽度上使用 em 会影响  而不是 ，如下所示：

p,span {width: 1em}

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

虽然我知道在 W3C 中一个“span element is a generic wrapper for phrasing content that by itself does not represent anything.，但我的意图是让它代表某种东西......而且由于它在段落中的使用如此频繁，为什么 CSS 不能影响它的 height/width 以与  相同的方式受到影响？

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

我只会编辑我的 question/answer 如果有什么地方不对或有具体的建议可以这样做。

Answer 1

下面的解决方案为没有文本的  提供默认高度，并尝试模拟  中的空内容：

一个

使用CSS，根据w3schools：

 p,span {height: 1em}

将设置高度：

Relative to the font-size of the element (2em means 2 times the size of the current font).

p, span {height: 1em}

<p></p>
<p>Above there's a ghost paragraph</p>
<span></span>
<span>To the left there's NO visible trace of a span</span>

B

仅使用 HTML，在  中放置一个 space ( )（因此它实际上有一个字符）：

<p>&nbsp;</p>
<p>Above there's a ghost paragraph with a space</p>
<span>&nbsp;</span>
<span>To the left there's a span with a space</span>

Answer 2

问题二

p 与 span 的宽度行为归因于 width 属性.

的 CSS 规范

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

请注意，如果您将 display: inline-block 应用于 span，则宽度会被识别，因为内联块不是不可替换的内联元素。

参考：http://www.w3.org/TR/CSS21/visudet.html#the-width-property

问题3

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

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

问题一

为了防止空的 p 标签折叠到零高度，我会使用 :after 伪元素插入一个不间断的 space ( 有十六进制代码 0xa0).

请注意，由于 span 是行内元素，其高度不会折叠为零，因为行内非替换元素的高度由 line-height 属性（height 被忽略），因此您不需要添加不间断的 space 除非您希望空的 space 具有非零宽度。

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>

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

How to provide default font height or content when <p> or <span> has no characters?

html

javascript

css

height

text

一个

B