要素の違いを理解する
スタイルシートを利用する前に、今一度HTMLの要素の違いについて解説します。
なお、以下の文章は本サイトのコンテンツ『HTMLタグ一覧』より一部引用しています。
ブロックレベル要素とインライン要素
HTML内に記述する様々な要素は大きく分けて「ブロックレベル要素」と「インライン要素」に分かれます。
同じ要素でも働きが異なります。具体的に説明します。
ブロックレベル要素の働き
ブロックレベル要素はHTML文書の骨格となる要素群です。
例えば、見出しタグ<hx>（x=1〜6）や段落タグ<p>がその一つです。
ブロックレベル要素はWEBブラウザ上では長方形の形をした表示領域となります。
また、多くのWEBブラウザではブロックレベル要素の後には改行が挿入され、スペースが空きます。（余白はスタイルシートで調節可能）
ブロックレベル要素は<body>内に直接記述することができます。
また、1つのブロックレベル要素に異なるブロックレベル要素を挿入することができます。（要素によっては不可なものもある）
さらに、ブロックレベル要素にインライン要素を挿入することも可能です。
参照：ブロックレベル要素一覧
インライン要素の働き
インライン要素は、多くはブロックレベル要素の中身となるようなもので、ある特定の部分を重み付けしたり、文章の一部に動作を加えたりする際に使用します。
例えば、強調タグ<strong>やリンクタグ<a>がその一つです。
インライン要素はブロックレベル要素とは異なり、表示領域を指定しません。
中にはブロックレベル要素と同じように長方形の形をとるものもありますが、特に決まっているわけではありません。
インライン要素に別のインライン要素を含ませることはできますが、インライン要素にブロックレベル要素を入れることはできません。
参照：インライン要素一覧
置換要素と非置換要素
インライン要素はさらに置換要素と非置換要素に分かれます。
インライン要素のほとんどは非置換要素です。
非置換要素は開始タグと終了タグに囲まれた文字列に要素ごとの装飾が加えられて、表示されます。
一方、置換要素は終了タグがないものもあり、開始タグと終了タグで囲まれた文字が表示されるのではなく、要素ごとの動作に置換されて表示されます。
例えば、画像タグ<img>などがその例です。
参照：置換要素一覧
