html - 为什么这会导致粗体字？

Question

首先，我想实现黑色背景：我得到粗体字母，而不是黑色背景。

代码

<span id="border"><h3>Title</h3>
        <p>Lorem Ipsum</p>
</span>

CSS 代码

#border {
    background-color: #000000;
}

提琴手

score 8 · Accepted Answer

这个粗体实际上来自您的h3标签作为默认样式，而不是您的边框 css。

至于为什么你的边框没有出现......那是因为 span 是一个内联元素，不会扩展为包含块级h3标签。

您可以通过将display: inline-block;样式添加到h3标签来查看此功能。

仅供参考，您不应该在跨度内有 h3，因为那不是有效的 html。我会推荐一个div标签作为span.

score 2 · Accepted Answer

两个问题：

粗体是<h3>标签的默认样式。
你的黑色背景没有出现，因为它在一个<span>元素上。

span 默认为display:inline，这意味着它包含块元素是无效的。是h3块元素。

要解决此问题，请使用 adiv而不是 a span，或将跨度设置为display:block.

score 1 · Accepted Answer

如果情况稍有不同，您可能会看到背景颜色。

考虑以下 HTML：

<span id="border">
    Some opening text...
    <h3>Title</h3>
    <p>Lorem Ipsum</p>
    and some closing text.
</span>

我只是在span元素中添加了一些文本。

对于 CSS，只需添加一种颜色，您就可以看到文本：

#border {
    color: green;
    background-color: #000000;
}

这里发生的是 CSS 引擎打开一个内联块 ( span) 并应用来自#border.

然而，在找到块级h3后，CSS 引擎（内部）关闭span元素并开始一个新的块级框，对于p元素也是如此。

在span从#border.

此过程是 CSS 框和视觉格式化模型的一部分。

3 回答 3