如何在<p>或& lt; span>没有字符

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

本文关键字：span 字符 lt      更新时间：2023-09-26

这是一个类似于这里的问题:HTML & lt; p>和& lt; span>问题。

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

没有任何特殊CSS规则的<p>元素没有文本当页面加载时，因此是height:0。由于javascript操作时，它开始有字符，因此高度为设置为默认的font-size，允许我们看到文本。

  1. 我怎么能保证这个<p>始终具有相同的高度(有或没有文本在里面)?

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

p,span {width: 1em}
<p>this is a paragraph</p>
<span>this a span</span>

  • 虽然我理解，在W3C一个"span元素是一个通用的包装措辞内容，本身不代表任何东西。，我的意图是让它代表一些东西……既然它在段落中的使用是如此频繁，为什么CSS不能像<p>一样影响它的高度/宽度呢?

    • 对于第一个问题，我给出了答案，但我没有将其标记为可接受的——我正在寻找一个答案，并给出理由来证明使用特定解决方案是合理的。

    我只会编辑我的问题/答案，如果有错误或提出具体建议，以便这样做。

    问题2

    p和span的宽度行为是由于width属性的CSS规范。

    width不适用于非替换的内联元素(span)，因此p是块级元素，取width值。

    请注意，如果您将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规范没有指定通用的inline-block元素，可能是因为规范组中没有成员认为需要它。

    请记住，HTML元素的默认样式依赖于浏览器，所以理论上，浏览器的默认样式表可以有p span的规则，但据我所知，这样的实现并不存在。

    问题1

    为了防止一个空的p标签坍缩到零高度，我将使用:after伪元素来插入一个不间断的空间(&nbsp;具有十六进制代码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>

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

    使用CSS，根据w3schools: 
     p,span {height: 1em}

    将设置高度:

    相对于元素的font-size (2em表示当前字体大小的2倍)

    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，在<p>内放置一个空格(&nbsp;)(因此它实际上有一个字符):

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

    相关文章：