html - 为什么我的图例不尊重父字段集的填充？

Question

看看这个:

<fieldset>填充为 50px在上面。 <legend>不尊重这一点，但是<p>做。这是为什么？

注意:我在下图中和我的代码笔中使用了 Bootstrap，但无论是否使用 Bootstrap，这个问题都适用。

---

HTML

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

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

CSS

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

fieldset {
  padding-top: 50px;
}

Code Pen

Answer 1

因为 Rendering section HTML5 规范是这样说的

10.3.13 The fieldset and legend elements

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:

• 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').

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