„Der nicht gerenderte Rand oben befindet sich in der Fieldset-Legende.“

Question

Ich habe einen HTML-Code, der entspricht:

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

Meine Frage ist, warum margin-top in der Legende nicht gerendert wird? Ich möchte dieses Problem nur mit CSS lösen. Danke!

Answer 1

如果你真的想要这样做，那么设置 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

尝试使用 padding 替代。这样就能起作用。

之所以 margin 不起作用是因为边框和文本内容之间的距离被称为 padding 而不是 margin。

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