"La marge supérieure non rendue figure dans la légende de l'ensemble de champs"

Question

J'ai du code HTML équivalent à :

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

Ma question est pourquoi margin-top sur la légende n'est pas rendu ? Je veux résoudre ce problème en utilisant uniquement CSS. Merci!

Answer 1

Si vous voulez vraiment faire cela, alors définissez 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

Essayez plutôt d'utiliser un rembourrage. Cela fonctionnera.

La raison pour laquelle la marge ne fonctionne pas est que la distance entre la bordure et le contenu du texte est appelée remplissage au lieu de marge.

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