Schau dir das an:
Das <fieldset>
hat oben ein Padding von 50px
. <legend>
respektiert dies nicht, aber <p>
tut dies. Warum ist das?
Hinweis: Ich verwende Bootstrap im Bild unten und in meinem Code-Stift, aber die Frage gilt unabhängig davon, ob Bootstrap verwendet wird.
HTML
%Vor%CSS
%Vor%Weil der Abschnitt Rendering der HTML5-Spezifikation besagt also
10.3.13 Die
fieldset
undlegend
ElementeWenn das
fieldset
-Element über ein Kind verfügt, das den Bedingungen entspricht In der folgenden Liste ist das erste Kind dasfieldset
element gerenderte Legende :
- Das Kind ist ein
legend
-Element.- Das Kind ist nicht out-of-flow (z. B. nicht absolut positioniert oder floated).
- Das Kind erzeugt eine Box (z. B. ist es nicht "display: none").
A
fieldset
Element rendered legende , falls vorhanden, wird erwartet über den oberen Rand desfieldset
-Elements gerendert werden als "Block" -Box (Überschreiben eines expliziten "Anzeige" -Wertes).
Filedset und Legend arbeiten zusammen und p agiert als eigene Entity. Aus diesem Grund respektiert die Legende das Padding nicht. Die Legende befindet sich im Feldsatz. Wenn du die Legende unter fieldset haben willst, kannst du das css:
verwenden %Vor%