htmlのブロック要素とインライン要素とは？

htmlタグは大きくブロック要素とインライン要素に分かれます。このブロック要素とインライン要素を理解していないとCSSで装飾するときにつまづきますし、html構築でも間違ってしまいます。

ブロック要素

ブロック要素はブロック＝塊＝外ワクとして扱う要素です。

ブロック要素の特徴

代表的なブロック要素のhtmlタグ

liは厳密には「list-item」という要素になりますが、特徴はブロック要素とほぼ同じです。

ブロック要素の子要素の扱い

div、liは子要素にブロック要素を含むことができます。

hタグもブロック要素を含むことができますが、hタグは見出しとして使うためその性質上ブロック要素を含むことはほぼありません。

pはブロック要素を含むことができません。

ulは子要素にli以外を含めてはいけません。

インライン要素

インライン要素は文章中で使用する要素であり、文章の一部であることを前提としている要素です。そのためこの要素の前後には文章をくっつけることができます。

インライン要素の特徴

代表的なインライン要素のhtmlタグ

インライン要素の子要素

aタグにはブロック要素を含めることができます。
aタグ自身をCSSのdisplay:blockでブロック要素に変化させて使いましょう。

aタグの子孫にaタグを含めることはできません。

spanはブロック要素を含めることはできません。文字の装飾としてよく使います。

imgに子要素はありません。

ブロック要素・インライン要素以外の要素

インラインブロック要素

インライン要素の特徴とブロック要素の特徴をもった要素です。

インラインブロック要素の特徴

代表的なインラインブロック要素のhtmlタグ

table

tableは表（ひょう）を作るhtmlタグです。

基本的にはブロック要素の特徴を持っていますが、横幅は内容に応じて最小幅になります。

tableとともに使う、tr、tdなども特殊です。

CSSとブロック要素とインライン要素の関係

CSSの効く・効かない

CSSを扱うにあたりインライン要素とブロック要素を理解することは非常に重要です。

なぜならインライン要素かブロック要素かにより効くCSS、効かないCSSがあるためです。

	インライン要素	ブロック要素
width	×	○
height	×	○
margin-top,bottom	×	○
margin-left,right	△ （autoは×）	○
padding	△ （上下に重なる）	○
background	○	○
border	○	○

上記以外にも中央寄せ、右寄せするときもCSSに注意する必要があります。

ブロック要素・インライン要素を変化させるCSS

htmlタグごとにブロック要素とインライン要素は決まっていますがCSS displayを使うことで変更することができます。

displayを使うとspanにwidthを指定したり、divを横並べすることも可能です。

displayについて詳しくはこちら↓

【まとめ】ブロック要素とインライン要素

ブロック要素とインライン要素の特徴・違いは下記のとおりです。

	ブロック要素	インライン要素
使い方	箱(ワク)	テキスト
兄弟要素	縦並び	横並び
横幅	親要素に合わせて最大	子要素に合わせて最小

以上、htmlのブロック要素とインライン要素でした。