ブロックレヴェル要素とインライン要素。

CSS を学ぶに当たり、避けて通れない概念が

の概念です。

従来の HTML 4/XHTML 1 にも、基本的な概念として採り入れられておりましたが、HTML 5 ではこの概念が撤廃されるため、CSS を学ぶうえで新たに識る必要があります。

ブロックレヴェル要素とは。

ブロックレヴェル要素とは、

などの纏まったブロックとなる要素です。

ブロックレヴェル要素の特徴として、以下のものがあります。

固有の大きさを持つ

ブロックレヴェル要素の場合、固有の高さと幅を持ちます。

上下左右にマージンを持つ

左右は勿論、上下にもマージンを取る事が出来ます。

尚、ブロックレヴェル要素が持つ上下のマージンは、隣接する他のブロックレヴェル要素が持つマージンと幅を相殺すると言う決まりがあります。

前後で改行する

後続する要素と切り離すため、改行が行われます。

この他にも、CSS のプロパティ定義でブロックレヴェル要素のみを対象としたプロパティなどが存在します。

HTML 4/XHTML 1 では、該当する要素をブロックレヴェル要素と定義しておりますが、HTML 5 には対応する概念はありません。

強いて HTML 5 で言うなら、フレージング内容要素でないフロウ内容要素が該当する事となります。

一方、インライン要素とは、テキスト類など、文章を構成するより細かい要素です。

但し、インライン要素には、

など、固有の幅と高さを持つ置換インライン要素と呼ばれる要素があり、これらの要素はブロックレヴェル要素とほぼ同様の特徴を持ちます。

置換インライン要素でないインライン要素の場合、以下のような特徴があります。

固有の大きさを持たない

置換インライン要素でないインライン要素の場合、大きさは不定です。

従って、高さや幅の概念はありません。

上下にマージンがない

上下にはマージンが存在しません。

左右については、日本語や英語など文字を左から右に書く言語では、

それぞれ存在します。

尚、パディングについては上下にも存在します。

左右のパディングはマージンと同じ箇所に存在しますが、上下のパディングは各行の上下に存在する事となります。

前後で改行しない

文章内の要素のため、改行は原則としてしません。

この他にも、CSS のプロパティ定義でインライン要素のみを対象としたインラインなどが存在します。

HTML 4/XHTML 1 では、該当する要素をインライン要素と定義しておりますが、HTML 5 にはほぼ同じ概念としてフレージング内容要素と呼ばれるものがあります。

また、置換インライン要素については、HTML 5 で言えば一部を除く埋め込み内容要素が相当する事となります。

ところで、CSS は HTML などのマークアップ言語とは別個の技術のため、ブロックレヴェル要素はどの要素か、或いはインライン要素はどの要素かと言う事を決める必要があります。

このため、CSS では display プロパティと言うプロパティが定められております。

CSS の仕様では、display プロパティのデフォルトは inline、すなわちインライン要素となります。

ですが、ウェブブラウザの場合は CSS がない場合でも適切な表示形態を取らなければならないため、従来の HTML 4/XHTML 1 でブロックレヴェル要素とされた要素については、デフォルトスタイルとして仕様とは異なった値としております。