インラインボックスの背景色は、子要素のブロックボックスには作用しない。

WEB-LABO

今更ですが、先週気づきました。

インラインの親要素に指定した背景色は、子要素のブロックブックスには作用しないんですね（汗）

どういうことか？というと

a要素などのインラインボックスでブロックボックスをマークアップした場合、親要素であるインラインボックスの背景やボーダーは、子要素であるブロックブックスに作用しない。

これは、CSSの継承とは違います。

もともとbackground-colorは継承しないプロパティです。 それぞれがブロックボックス同士の場合は、子要素のブロックボックスに背景色を指定していない時、親要素のブロックボックスの背景色がそのまま見える形になります。

しかし、親要素がインラインボックスで子要素がブロックボックスの場合は、親要素の背景色は子要素には作用せず色が変わりません。

 

試してみましょう！

h1要素とp要素をマークアップしたa要素があるとします。

<a href="">
    <h1>見出し</h1>
    <p>ここが文章になります</p>
</a>

このa要素に下のCSSの様に背景色に赤色を指定します。

<style type="text/css">
	a{
		background-color: #ff0000;
	}
</style>

しかし、h1要素やp要素の背景は赤色に変わりません。

a要素などのインラインボックスで、h1やpなどのブロックボックスをマークアップした場合、親要素であるインラインボックスの背景やボーダーは、子要素であるブロックブックスに作用しない。

 

そこで疑問

作用しないのは背景やボーダーだけ？ってこと。

<span>
    <h1>見出し</h1>
    <p>ここが文章になります</p>
</span>

なので、a要素をspan要素に変更し、文字色も設定してみました。

<style type="text/css">
	span{
		background-color: #ff0000;
		color: #ff0000;
	}
</style>

結果、文字色はしっかり赤色に変わりました。 これはCSSの継承ですね。

 

HTML4.01やXHTMLでは、インライン要素はブロックレベル要素の中で使うもので、インライン要素でブロックレベル要素をマークアップすることは認められていませんでした。 しかし、HTML5では、これが認められるようになりました。

今までも、仕方なくやることはありましたが、これがHTML5からはOKですよ！と言われても、なんか違和感があります（笑）

なので、今まで気づきませんでした（汗）

 

関連記事