initialとunsetは同じリセット？colorとpaddingで継承の違いを比べよう

CSSの指定をいったん戻したくてunsetを書いたら、親の文字色が残った。initialにすると別の色になる。どちらもリセットのように見えるけれど、戻し先は同じではないよ。

このページは、親子の要素とCSSプロパティの基本が分かる人向け。文字色のcolorと内側の余白のpaddingを同時に切り替え、どの値が親から伝わるかをブラウザで確かめる。

親から自然に伝わる性質がある

文字色のcolorは、子に別の指定がなければ通常は親から継承される。一方、paddingは通常は継承されない。親に20pxのpaddingがあっても、子にも自動で20pxが付くわけではないんだ。

作例では、親のcolorを紫、paddingを20pxにしている。子の背景や枠は固定し、子のcolorとpaddingへ指定するキーワードだけを変えるよ。

.parent {
  color: #5445df;
  padding: 20px;
}
.child {
  color: inherit;
  padding: inherit;
}

inheritは、その性質が普段継承されるかにかかわらず、親から値を受け取る指定。この例では子の文字も紫になり、paddingも20pxになる。

initialは、そのプロパティの初期値

initialにすると、親の値ではなくCSSで定義されるそのプロパティの初期値を使う。paddingは0へ戻り、colorは環境に応じた初期の文字色になるよ。

.child {
  color: initial;
  padding: initial;
}

initialは「このHTML要素へブラウザが最初に付けていた見た目を、丸ごと復元する」という操作ではない。指定するのは個々のプロパティの値だよ。要素の種類ごとの標準スタイルと混同しないようにしよう。

unsetは、自然な継承の有無で選ぶ

unsetは、そのプロパティが本来継承されるならinheritのように、継承されないならinitialのように振る舞う。今回の二つは違う側へ分かれるんだ。

「unsetならすべて親と同じ」「unsetならすべて初期値」とは覚えないでね。対象のプロパティが何かを見て選ぶ必要がある。

ページ内で三つを比べる

1. inheritで、子の文字色と黄色い箱の内側の余白を見る。
2. initialへ切り替え、余白が0になり文字色も変わることを見る。
3. unsetへ切り替え、余白は0のまま文字色が親の紫になることを確かめる。
4. 計算済みのcolorとpaddingを表示欄で読み、「最初から試す」でinheritへ戻す。

初期の文字色は利用環境にも依存するため、必ず同じRGB値になると考えないでね。作例は指定したキーワードと、ブラウザが計算した値を分けて表示している。

予想と違うときは、子の指定も見る

親から伝わるはずの色が来ない場合、子に別のcolorが指定されているかを開発者ツールで確認しよう。継承は、親の指定がどんな子の指定にも勝つという意味ではないよ。

同時に多くの性質を戻す前に、まず一つずつ対象を絞り、余白・文字・表示方法のどれを戻したいかを整理すると調べやすいね。

編集部では2026年10月29日にMDNを確認し、三つのモードの計算済み色・paddingとリセットをスマホ幅・PC幅のブラウザで検証した。CSSの詳細度、背景色とopacityも合わせて読めるよ。