"未渲染的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>