CODEWITHSUNDEEP
htmlcss
Adam Zerner
Adam Zerner

Reputation: 19248

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

Look at this:

enter image description here

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

Upvotes: 10

Views: 2154

Answers (2)

Oriol
Oriol

Reputation: 288550

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

Upvotes: 5

Victor Luna
Victor Luna

Reputation: 1814

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:

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

Upvotes: 0

Related Questions