"未渲染的margin-top在fieldset的legend上"

Question

我有一些等效于以下内容的HTML代码：

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

我的问题是为什么在 legend 上的 margin-top 没有渲染？我想只用 CSS 来解决这个问题。谢谢！

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>