margin: auto;とinset: 0; とposition:fixed;を使用して要素が縦横中央にくる理屈

ある教材で、下記コードの.lessonを画面の中心に持ってくる練習問題がありました。

html
1<section class="lesson">
2  <h1>lesson</h1>
3</section>
4<div class="container"></div>

css
1.lesson {
2  inset: 0;
3  margin: auto;
4  position: fixed;
5
6  background-color: #fff;
7  padding: 20px;
8  width: fit-content;
9  height: fit-content;

解説には.lesson内の下記の3つの組み合わせで中心に持ってこれるとあったのですが、理屈がよくわかりません。

css
1  inset: 0;
2  margin: auto;
3  position: fixed;

私が理解できないのは下記3点になります。

・1点目：調べたところmargin: autoはtop/bottom/left/right同時に指定されると書いてましたが、基本横方向の中心にしか来てくれませんでした。　position:fixedを入れたら、ようやく縦方向の中心に来てくれたのですが、margin: autoはposition:fixedがないと縦に移動しないのでしょうか。

・2点目：insetはpositionプロパティと一緒に使用するのが一般的とありました。
またinset:0;だと上下左右の四方向の位置を一度に指定することができると教材に書いてありました。
しかしinset:0;だと上下左右全て親要素の端くっついてる状態ではないかと思ったのですが、それは親要素の画面一杯に要素が広がらないと成立しない状態ではないのでしょうか。
しかし教材の画面では親要素一杯に広がっている感じではありませんでした。

・3点目：2点目に疑問に思ったinsetで指定した要素が親要素の画面一杯に広がる状態かどうかを調べたていたところ、明確な回答は見つかりませんでした。
しかし調べていく中で、要素が大きくなって画面全体を覆っている状態は異なりますとでました。この言葉の意味しているところがわかりません。

どなたかご教示いただけませんでしょうか。
宜しくお願い致します。

行動規範の内容に同意します

回答2件

ベストアンサー

はい。通常のブロックコンテナの通常フローの子だと、その子は縦方向の空間を占有できないため上下のマージンは auto にできません。横方向には他の子が入らないので auto にできます。position: fixed にすると他の子は無関係なので全て auto にできます。
inset left right などは、マージンボックスの位置を指定します。マージンがコンテナ全体に広がっているわけです。
マージンボックスが広がっています。ボーダーボックスは広がりません。

投稿2024/03/21 01:27

int32_t

総合スコア20884

ndaaa

2024/03/22 13:49

納得できました。ありがとうございました。

行動規範の内容に同意します

1点目
margin: autoはposition:fixedがないと縦に移動しないのでしょうか

margin: autoは余白があった時に、上下または左右で等分に分配しなさい、というような指定です。
なので、上下に余白がない場合は何もしません。position:fixedとすると包含ブロックがビューポートになるので余白ができますから、効いているように見えます。

2点目：
しかしinset:0;だと上下左右全て親要素の端くっついてる状態ではないかと思ったのですが、それは親要素の画面一杯に要素が広がらないと成立しない状態ではないのでしょうか。
しかし教材の画面では親要素一杯に広がっている感じではありませんでした。

margin: autoなので、マージン領域が広がっています。

3点目

上記の通りです。

まとめると、以下の表がわかりやすいです。

https://drafts.csswg.org/css-position/#abspos-auto

この表は、横方向のものですが基本的には縦方向に読み替えられます。
このコードの場合、
inset:0でtopとbottomはautoではないので、両方とも✘
width:fit-content;でautoではないので✘
margin: autoなのでmargin-topとmargin-bottomはautoなので、両方とも✔
ということで✘ ✘ ✘ ✔ ✔ 、結果はmargins split positive free spaceになるということです。