"Unrendered margin-top is on fieldset's legend"

Question

I have some HTML code equivalent to:

<div style="border: 1px solid black">
  <fieldset style="margin: 0">
    <legend style="margin-top: 20px;">testing....</legend>
  </fieldset>
</div>

My question is why the margin-top on the legend is not rendered? I want to solve this problem using only CSS. Thanks!

Answer 1

If you really want to do this, then set legend { float: left; }:

legend {
  float: left;
}

<div style="border: 1px solid black">
  <fieldset style="margin: 0">
    <legend style="margin-top: 20px;">testing....</legend>
  </fieldset>
</div>

Answer 2

Try using padding instead. This will work.

The reason why margin doesn't work is because the distance between the border and the text content is called padding instead of margin.

<div style="border: 1px solid black">
  <fieldset style="margin: 0">
    <legend style="padding-top: 20px;">testing....</legend>
  </fieldset>
</div>