width を設定しないと margin: 0 auto; が 適用されないのはなぜですか?

width を設定しないと『余白がない状態』のままになってしまうからです。
2022年4月11日
ユーザー

お世話になっております。
初歩的な質問になってしまうかもしれませんが、表題の件についてお聞きします。

レッスン内でこのようなコードがありました。
CSS ファイルの 22 行目

header .container {
  width: 400px;
  margin: 0 auto;
  outline: 2px solid red;
  display: flex;
}

現在、このレッスンの完成版を元に模写コーディングの練習を行なっているのですが、
headercontainer クラスに対して width の設定をしなかったところ、
margin:0 auto; が反映されず、左寄りのままでした。

完成版のソースコードを見直し、 width:400px; を追加したら、 margin: 0 auto; も適応され、レッスン通り中央寄せにすることができたのですが、
この場合、margin: 0 auto; で中央寄せにするためになぜ width の設定が必要だったのかが理解できず、質問させていただきました。
(そうゆうものだと覚えた方が早いのかもしれませんが、特に width の設定をしなくても margin: 0 auto; が適用されていることもあったので疑問に思いました)
ご回答よろしくお願い致します。

この回答を見るにはプレミアムサービスへの登録が必要です

プレミアムサービスとは?