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

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

サンプル	CSSの継承
	継承される例 (color)
	継承されない例 (margin)
	inheritで強制的に継承させる例(margin)

CSSの継承

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

継承される例

継承されるサンプルです。

<style>
  .div2 {
    color: red;
  }
</style>
<div class="div1">
  テスト1
  <div class="div2">
    テスト2
    <div class="div3">テスト3</div>
  </div>
</div>

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

上記コードの結果です。

継承されない例 (margin)

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

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

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

上記コードの結果です。
テスト6の左側のマージンに10pxの幅はありません。

テスト4

テスト5

テスト6

inheritで強制的に継承させる例(margin)

inheritで強制的に継承させる例です。

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

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

上記コードの結果です。
テスト6の左側のマージンに10pxの幅があります。

テスト7

テスト8

テスト9

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