为什么我的传说不尊重父字段集的填充？

Look at this:

看这个：

The <fieldset> has a padding of 50px on top. <legend> doesn't respect this, but <p> does. Why is this?

顶部有50px的填充。

不尊重这个，但

确实如此。为什么是这样？

Note: I'm using Bootstrap in the picture below and in my Code Pen, but the question applies regardless of whether Bootstrap is used.

注意：我在下面和我的代码笔中使用Bootstrap，但无论是否使用Bootstrap，问题都适用。

---

HTML

HTML

<div class='placeholder'></div>

<fieldset>
  <legend>LEGEND</legend>
  <p>PARAGRAPH</p>
</fieldset>

CSS

CSS

.placeholder {
  height: 100px;
  background-color: red;
}

fieldset {
  padding-top: 50px;
}

Code Pen

密码笔

2 个解决方案

#1

Because the Rendering section of the HTML5 spec says so

因为HTML5规范的渲染部分是这样说的

10.3.13 The fieldset and legend elements

10.3.13字段集和图例元素

If the fieldset element has a child that matches the conditions in the list below, then the first such child is the fieldset element's rendered legend:

如果fieldset元素的子元素与下面列表中的条件匹配，则第一个这样的子元素是fieldset元素的渲染图例：

• The child is a legend element.
• 孩子是一个传奇元素。
• The child is not out-of-flow (e.g. not absolutely positioned or floated).
• 孩子不会流出（例如，没有绝对定位或漂浮）。
• The child is generating a box (e.g. it is not 'display:none').
• 孩子正在生成一个盒子（例如，它不是'display：none'）。

A fieldset element's rendered legend, if any, is expected to be rendered over the top border edge of the fieldset element as a 'block' box (overriding any explicit 'display' value).

字段集元素的渲染图例（如果有）应该在fieldset元素的顶部边框边缘上呈现为“块”框（覆盖任何显式的“显示”值）。

#2

Filedset and legend work together and p acts as its own entity this is why legend does not respect the padding. Legend is within the fieldset. If you want to have the legend below fieldset, then you can use the css:

Filedset和图例一起工作，p充当它自己的实体，这就是传说不尊重填充的原因。传奇属于该字段集。如果你想让字段集下面的图例，那么你可以使用CSS：

fieldset, legend {
    padding-top: 50px;
}