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

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

ブロックレベル要素とは

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

例：

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

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

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

背景色無しの例：

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

このようにタグをかいてもサンプルと同じく改行されます。
そのため右側に持ってくるためにはCSSで調整してあげるか、「サンプル文字」をブロック要素であるpタグで囲うのではなくインライン要素で囲う必要があります。

「要素が横幅100%になる」

これはとても大事な考えになるので覚えておきましょう。

インライン要素とは

横幅はブロック要素と違い100%まで広がらず、要素分の横幅になります。そして前後の改行は入りません。
以下の例を見てみましょう。

例：

先ほどのブロック要素と同じ例で、インライン要素にしました。赤い背景色のエリアが文字部分だけとなり前後の改行がなくなりました。

余白部分はどこ？

インライン要素は名前の通り行内で使うケースが多いです。リンクをかけるaタグ、画像のimgタグ、改行をいれるbrなど。pタグで囲った文章内に赤文字したい部分をspanで囲い、class名redとつけてcssでcolor: red;と定義する。そんな使い方をします。
注意したいのはインライン要素の余白部分はどこか？ということです。
前後に改行を挟まないため上下の余白は定義しても効きません。効くのは左右です。
例えば先ほどの例の背景赤い部分にmarginのtopとbottomに100pxずつかけてみましょう。

margin topとbottomに100pxをかける例：

見た目変わりませんね。インライン要素のため上下の余白が無くmargin topとbottomをかけても効かないからです。もちろん左右にはOK。

左右の余白に20pxをかける例：

このようなかたちです。

まとめ

ブロック要素とインライン要素、違いをしっていると効くCSS効かないCSSの違いがわかるようになります。これがわかればCSSは怖いものナシ！
適用させたはずのCSSがなぜ効かないのか？がわかるようになってどこに原因があるのかわかるようになります。
だけど問題の原因って意外とCSSのセミコロンを書き忘れてた…とかあるんですよね。。。