Why doesn't my legend respect the padding of the parent fieldset?

Question

Look at this:

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

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

---

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

Because the Rendering section of the HTML5 spec says so

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