CSS プロパティの初期値とはなんですか?

値を設定しなかった場合に適用される値のことです。
2021年3月5日
ユーザー

基本的なことでかつ、本講義に直接関連した質問ではなく申し訳ありませんが、CSSプロパティの初期値の考え方について教えていただきたいです。

本講義の中で、

flex-direction プロパティの初期値は row で主軸は左から右に設定されます。

とありますが、ここの初期値の意味として、「そのプロパティの記載がない場合に画面に反映される値」、という意味でしょうか。
例えば、 「#09 2カラムレイアウトを作ってみよう」では、.containerクラスにflex-direction プロパティは設定していませんが、flex-itemflex: 1;を設定した結果、flex-direction プロパティの初期値(row)の主軸にしたがって、左から横並びになっております。(※flex-direction プロパティをrow-reverseに設定したら、横並びの順番が逆になりました。)
これまでもCSSの初期値の話題は出てきましたが、考え方としては上記の通り、「そのプロパティの記載がない場合に画面に反映される値」ということでよろしいでしょうか。

ただし、上記の考えが正しい場合、以下のような例外もある認識です。
例で言いますと、「#09 2カラムレイアウトを作ってみよう」のmarginですが、初期値はMDNによると0ですが、marginを指定しない場合、上下左右8pxのmarginが画面に反映されました。これは「user agent stylesheet」やブラウザによって決められている値が優先されるから、という認識で問題ないでしょうか。

長文になって申し訳ありません。まとめますとお聞きしたい内容は以下の2点です。

①CSSのプロパティの初期値の考え方としては、「そのプロパティの記載がない場合に画面に反映される値」ということでよろしいでしょうか。

②初期値が反映されない場合も存在するが理由としては「user agent stylesheet」やブラウザによって決められている値が優先されるから、という認識は正しいでしょうか。他に例外はありますでしょうか。

この回答を見るにはプレミアムプランへの登録が必要です

プレミアムプランとは?

このレッスンの質問と回答(6)