<fieldset> 要素と <legend> 要素の仕様について

Question

前提・実現したいこと

<fieldset> 要素と <legend> 要素について、CSSのリセットを行いスタイルの影響をできるだけ排除しましたが、以下のような表示を確認しました。

• <fieldset> 要素のパディング上辺を中心として <legend> 要素が置かれる
• <fieldset> 要素のボーダーが、 <legend> 要素がある部分だけ描画されない
• <legend> 要素の下に余白ができる

どのような仕様によって、このような表示となっているのか教えてください。

該当のソースコード

サンプル

legend,fieldset{
  all: unset;
}
fieldset{
  display: block;
  border: solid 1px;
  background: gold;
}
fieldset + fieldset{
  padding: 20px;
}
fieldset + fieldset + fieldset{
  background-clip: content-box;
}

試したこと

all: unsetとした上での表示なので、CSSの仕様ではなくてHTMLの仕様ではないかと感じています。
↓こちらの仕様については、目を通したつもりです。
4.10.15 The fieldset element | HTML Standard

補足情報（FW/ツールのバージョンなど）

Win10 Firefox84, Chrome87 で確認しました。

Answer 1

<fieldset>と<legend>の特殊なレイアウトに関しては、HTML仕様で定められています。

The fieldset and legend elements

2021年1月現在、この特殊レイアウトはCSSで表現できませんし、特殊レイアウトを解除する手段も用意されていません。

Comments

[Lhankor_Mhy]

なるほど、匿名fieldsetコンテンツボックスというものが生成されているのですね。理解できました。
ありがとうございます。