CSS スタイルの継承のサンプル(inherit)

CSSのスタイルの継承のサンプルです。

CSSの継承
継承される例 (color)
継承されない例 (margin)
marginにinheritを使用

CSSの継承

CSSのプロパティによって親要素に指定した値が子要素に継承されるものと継承されないものがあります。
※プロパティとは、例えば h2 { color : green } としたときのcolorがプロパティです。(h2がセレクタ、greenが値です)
テキストやフォント関連のプロパティは値が継承されるものが多いです。
マージン(margin)やパディング(padding)などは値が継承されません。
inheritを使用すると強制的に値を継承させることができます。

継承される例 (color)

継承される例のコードです。

2,3行目でクラスt2の文字の色を指定しています。
9行目のクラスt2の文字の色は2,3行目で指定した色になります。
10行目のクラスt3の文字の色も親要素から値が継承され2,3行目で指定した色になります。

<style>
.t2{ 
  color:red;
}
</style>
<body >
<p>
	<span class="t1">テスト1<br>
		<span class="t2">テスト2<br>
			<span class="t3">テスト3</span>
		</span>
	</span>
</p>
</body>

上記コードの結果です。

テスト1
テスト2
テスト3

継承されない例 (margin)

継承されない例のコードです。

5,6行目でクラスt5のマージン(margin-left)を10pxに指定しています。
15行目のクラスt5のマージン(margin-left)は5,6行目で指定した幅になります。
16行目のクラスt6にはマージンの値は継承されません。

<style>
.t4{
	border:solid 3px red;
}
.t5{
	margin-left:10px;
	border:solid 3px orange;
}
.t6{
	border:solid 3px blue;
}
</style>
<body >
<div class="t4">テスト4
	<div class="t5">テスト5
		<div class="t6">テスト6</div>
	</div>
</div>
</body>

上記コードの結果です。

テスト4

テスト5

テスト6

marginにinheritを使用

marginにinheritを使用して、強制的に継承させる例です。

5,6行目でクラスt8のマージン(margin-left)を10pxに指定しています。
10行目でマージンにinheritを指定しています。
16行目のクラスt8のマージン(margin-left)は5,6行目で指定した幅になります。
17行目のクラスt9は、10行目のinheritのため親要素のクラスt8のマージン(margin-left)が継承されて適用されます。

<style>
.t7{
	border:solid 3px red;
}
.t8{
	margin-left:10px;
	border:solid 3px orange;
}
.t9{
	margin-left:inherit;
	border:solid 3px blue;
}
</style>
<body >
<div class="t7">テスト7
	<div class="t8">テスト8
		<div class="t9">テスト9</div>
	</div>
</div>
</body>

上記コードの結果です。

テスト7

テスト8

テスト9

以下はMDNのinheritのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/inherit