Question 199902 in Html Question posted in
Some basic documentation can be found here.

Html – margin-top on legend inside a fieldset is not rendering

I have some HTML which is equivalent to the following:

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

My question is why does the margin-top on the legend not render? I’d like to fix the issue with CSS only. Thanks!

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    Try padding instead. And it will work.

    The reason why margin doesn’t work because the distance between the border and the text content is called padding not margin.

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

    I am no sure what exactly you are looking for. But you can also try padding in the container and vertically center the text within the container if that’s what you want.

    <div style="border: 1px solid black; padding-top: 20px;">
  <fieldset style="margin: 0">
    <legend>testing....</legend>
  </fieldset>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search