如何在< p>时显示默认字体高度或内容，或< span>没有字符？ [英] How to provide default font height or content when <p> or <span> has no characters?

问题描述

这开始有一个类似这里的问题：
HTML< p>和< span>问题。

This started with one question similar to this one in here: HTML <p> and <span> questions .

结束于3 ...我想了解为什么会发生以下情况。从此示例开始：

And ended with 3... I want to understand why the following happen. Starting with this example:

A < p> 元素没有任何特殊CSS规则在页面加载时没有文本
，因此 height：0 。由于页面中的javascript
操作，它开始具有字符，因此高度是
设置为默认值 font-size ，这允许我们请参阅文本。

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. 如何确保此 ;

1. How can I assure that this <p> has always the same height (with or without text inside it)?

为什么使用 像这样：

Why does using em in width affects a <p> and not a <span> like this:

p,span {width: 1em}

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

1. 虽然我了解在W3C中， span 元素是一个通用的包装器，用于表达内容本身不代表任何东西。，我的意图是使它代表什么...因为它的用法在段落中是如此频繁，为什么CSS不能以与影响< p> 相同的方式影响其高度/宽度？​​

1. Although I understand that in W3C a "span element is a generic wrapper for phrasing content that by itself does not represent anything., my intention is to make it represent something... And since it's usage inside paragraphs is so often, why CSS cannot affect its height/width in the same way a <p> is affected?

我回答了第一个问题，我的想法，但我不是把它标记为接受 - 我正在寻找一个答案出现的理由，证明使用一个特定的解决方案。

I am answering to the first question with what I figured out, but I am not marking it as accepted - I am looking for an answer coming up with reasons that justify the usage of a particular solution.

如果发生错误或提出具体建议，我将只编辑我的问题/答案。

I will only edit my question/answer if something is wrong or specific suggestions are made in order to do so.

推荐答案

问题2

p span 是由于 width 属性的CSS规范。

The width behavior of p versus span is due to the CSS specification for the width property.

width 不适用于未替换的内嵌元素（ span ），因此<$ c $

width does not apply to non-replaced inline elements (span), so p being a block level elements, takes on the width value.

请注意，如果您应用显示：inline-block 到 span ，则会识别宽度，因为inline-block不是未替换的内联元素。

Note that, if you apply display: inline-block to a span, then the width is recognized since an inline-block is not a non-replaced inline element.

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

问题3

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

HTML provides two generic, vanilla-flavored elements, div which is a block-level element, and span which is an inline element. span can be used within any element, be it p, li, td, i and so on. If you want a span nested in a p to have a particular styling, you can define a specific CSS rule to enable the styling that you need. If you want p like behavior with respect to width, padding, and margins, then you can specify display: inline-block. The HTML specification does not specify a generic inline-block element, probably because no member of the specification group saw a need for it.

请记住，默认的样式HTML元素是与浏览器相关的，因此在理论上，浏览器的默认样式表可以有 p span 的规则，但据我所知，这样的实现不存在。

Keep in mind that the default styling of HTML elements is browser dependent, so in theory, a browser's default style sheet could have a rule for p span, but as far as I know, such an implementation does not exist.

问题1

要防止空的 p 伪元素插入一个不间断的空格（：： & nbsp; 有十六进制代码 0xa0 ）。

To prevent an empty p tag from collapsing to zero height, I would use a :after pseudo-element to insert a non-breaking space (  has the hex code 0xa0).

span 是一个内联元素，其高度不会折叠为零，因为内联，未替换元素的高度由 line-height 属性（ height 被忽略），因此您不需要添加不间断空格。零宽度。

Note that since the span is an inline element, its height will not collapse to zero because the height of an inline, non-replaced element is determined by the line-height property (height is ignored), so you don't need to add the non-breaking space UNLESS you want an empty space to have non-zero width.

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>

这篇关于如何在&lt; p&gt;时显示默认字体高度或内容，或&lt; span&gt;没有字符？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！