10.ブロックレベル要素とインライン要素について

知っておくとCSSの組み立てがラクになる、「ブロックレベル要素とインライン要素の違い」について説明します。
これらはHTMLのタグの種類です。HTMLタグにはすべて「要素」があります。要素っていうとなんか難しく聞こえるんですがなんのことはなく、「このタグがどういう種類か？」ということです。
それが2種類あり「ブロック要素」か「インライン要素」どちらか。
例えばh1、p、div、ulはブロックレベル要素。span、a、img、bgはインライン要素です。

ブロックレベル要素とは

要素が横幅100%に拡がり、前後に改行が入るHTMLタグをブロックレベル要素と分類します。単純にブロック要素といったりも。
まずは以下の例を見てみましょう。

例：

赤い背景色の「サンプル文字」と書かれたエリア、これがブロック要素のエリアです。要素が100%に広がってますね。前後に文字がありますがbrなどで改行をしてないが改行してくれています。

大事なのは「要素が横幅100%になる」

先ほどの例の赤い部分。これがブロック要素のエリアです。わかりやすいように赤く色をつけましたが、つけないと右側に余白があるように見えます。以下のように。

背景色無しの例：

これだと「右側に余白があるから、次に続く要素を右に持っていきたい」と考えてなんとか右にもってこようとします。しかしこれはブロック要素。前後に改行が入るためすぐ後ろにタグを書いても右側にはきてくれません。

サンプル文字
右側にもってくる文章