Warum berücksichtigt meine Legende nicht die Auffüllung des übergeordneten Feldsets?

Question

Blick auf diese:

Die <fieldset> eine Polsterung von 50px oben hat. <legend> respektiert dies nicht, aber <p> tut dies. Warum ist das?

Hinweis: Ich verwende Bootstrap im Bild unten und in meinem Code Pen, aber die Frage gilt unabhängig davon, ob Bootstrap verwendet wird.

---

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

Da die Rendering section der HTML5-Spezifikation sagt so

10.3.13 Die fieldset und legend Elemente

Wenn das fieldset Element ein Kind hat, das die Bedingungen erfüllt in der Liste unten, dann das erste solches Kind ist die fieldset des Elements gemacht Legende:

• Das Kind ist ein legend Element.
• Das Kind ist nicht out-of-Flow (z. B. nicht absolut positioniert oder schwebte).
• Das Kind erzeugt eine Box (z. B. ist es nicht "display: none").

A fieldset Element rendered legend, falls vorhanden, wird erwartet über die obere Randkante des fieldset Elements zu erbringenden als 'Block' Box (überschreibt einen expliziten 'Anzeige' Wert).

Answer 2

Filedset und Legende zusammen arbeiten und p wirkt als seine eigene Entität diese wh ist Die Legende respektiert das Auffüllen nicht. Die Legende befindet sich im Feldsatz. Wenn Sie die Legende unter Fieldset haben wollen, dann können Sie die CSS verwenden:

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