入れ子の関係とプロパティ継承 (インライン要素で実験)

HTML要素で、<p>や<h1>,<h2>,<h3>,..<hr>,<table>,<form>、<div> などは、必ず1行以上の領域となり、ブロックレベル要素と呼ばれます。 参考ページ
対して、<br>、<img >、<a >、<sub>、<span> などは、 ブロック要素の中で使うべき要素でインライン要素と呼ばれます。
インライン要素の中にブロック要素を入れることはできません。
ブロック要素は、その範囲の中に他のインライン要素などを入れることができます。
このように内部に要素を含むことを入れ子にすると言います。
また 入れ子の関係がある時、外側の要素が「親」で、 内部内側の要素を「子」の要素と呼びます。
そして、「親」のプロパティに指定したものが「子」に 反映することを継承と呼びます。
（なお、「子」の中にまた別のタグがあれば、そのタグは親からすると孫になるのでしょうが、 まとめて「子孫」の要素と呼ぶことが多いようです。）

例えば、bodyの中でh1やpを使っていることも入れ子 であるといえます。「親」がbodyで でh1やpが「子」となる関係です。
bodyでbackground-colorをyellow、 font-styleを italicにすると、 内部で使っているh1やpの内容も特別な指定をしなければ 背景色がyellowで文字スタイルがitalicになります。 これも継承の一つです。

<p style="background-color: yellow; font-style: italic;  font-size: 16pt;">
pの中でspanを<span style="font-size: 22pt;">ここ</span>と、
<span style="background-color: lime;">あそこ</span>で使っています。</p>

<p style="background-color: yellow; color: red; line-height: 2em; padding-left: 50pt;">
pの中でspanを
<span style="background-color: lime; border: solid 2px blue; margin-right: 20px;">ここから
<b>『ここはｂの指定』</b></span>まで使っています。</p>

line-heightや、paddingが継承されていませんね。colorは子孫へ継承されています。

継承を利用したHTMLのソースコードは、コード量を減らすことで、読み易くなる傾向があります。
しかし個々の継承が可能かの規則はたくさんあるので、 必要以上に継承させようとすると、後で変更が難しくなります。
特に初心者は 背景色、文字色、文字飾り以外の継承を「こだわりすぎない方がよい」というのが個人的見解です。
（なお、継承ができないものでも、 後述するinheritをプロパティを使うことで引き継ぎ可能へ変更することもできます。 しかし、Internet Explorer Ver.7 まではinheritが対応していません。 このようなブラウザのバージョンまで気にすると大変ですね・・・）

　インライン要素による継承の確認問題

以下は、文字列を飾る <em>、<strong>、<b>、<i>、<u>、<s>の インライン要素を紹介している問題です。
<〜 始まるタグに対して、 </〜 の終わりの閉じるタグがありません。 これを直す問題ですが、 終わりの閉じるタグが無いと、入れ子の構造が出来上がります。 これによって 問題を直す前では、 下にある文章の方ほど 継承する属性が増えている状況を確認できます。
違う所→表示の順番が違います。カットと貼り付け操作で順番を合わせます。 次に、閉じるタグない所へ閉じるタグを追加します。 また複数のセレクタに対して 同じスタイルを指定する場合、 セレクタを , のコンマで区切って複数並べることができますが、 これで足りないセレクタを追加する必要があります。

なお、上記では行間を空けるために<br><br>を2回使っていますが、 本来は、このような使い方をすべきではありません。
このような場合は、それぞれの文章をpで囲んで、marginなどで調整するのが良いでしょう。