CSS 継承のサンプル(inherit)

CSSの継承とは

親要素に指定したスタイルが、子要素にも自動的に引き継がれる仕組みです。

例

<style>
    .parent {
        color: red;
    }
</style>
<div class="parent">
    <p>Hello</p>
</div>

この場合、7行目のP要素の文字の色も赤になります。

すべてのCSSプロパティが継承されるわけではありません。
継承されるプロパティと継承されないプロパティがあります。

プロパティとは、上記例ではcolorです。

自動的に継承されるプロパティ（代表例）

主にテキスト関連です。
文章の見た目を整えるプロパティは、基本的に下位要素へ受け継がれます。

プロパティ	説明
color	文字色
font-family	フォント
font-size	文字サイズ
font-weight	太さ
line-height	行間
text-align	文字揃え
visibility	表示・非表示

自動的に継承されないプロパティ（代表例）

主にレイアウト・見た目系です。

プロパティ	説明
margin	外側の余白
padding	内側の余白
border	枠線
width / height	要素そのものの大きさ
background	要素の背景
display	要素の並び方・ふるまい
position	要素の配置方法

※子要素でbackgroundのinheritを書かない場合、子要素の背景は透明で親の色が透けて見えるだけになります。（値として継承されているわけではない）

inheritを使って強制的に継承させる

本来は継承されないプロパティでも、明示的に継承できます。

<style>
    .parent {
        border: 1px solid #333;
        width: 100px;
    }
    .child {
        border: inherit;
    }
</style>
<div class="parent">
    <p>Hello1</p>
    <div class="child">
        <p>Hello2</p>
    </div>
</div>

inheritで継承した場合、Hello2の周りに枠線があります。

継承しなかった場合(.childでborderを指定しない場合)、Hello2の周りに枠線がありません。

継承をコントロールする値

値	意味
inherit	親要素の値を強制的に継承させる。
initial	ブラウザの初期値（デフォルト）に戻す。
unset	継承プロパティなら「継承」、そうでなければ「初期値」にする。
revert	ブラウザが元々持っているスタイル（ユーザーエージェントスタイルシート）に戻す。