[XHTML] ブロックレベル要素とインライン要素の違いについて

HTMLの<Body>の中で使われる要素は大きく「ブロックレベル要素」と「インライン要素」の２つに分類することができます。

いきなり要素とかブロックレベルとかインラインとかいう言葉が出てきてもよくわかりませんよね？

ここでいう要素っていうのは<div> <a> <span> <img> <li> などの「HTMLタグ」になり、それらがブロックレベル要素とインライン要素に分類されるます。

簡単にいうとHTMLタグはブロック要素とインライン要素の２つのグループに分かれているよ！ってことです。

ブロックレベル要素とインライン要素にはそれぞれ特徴があり、スタイルシートでプロパティを設定するときに、効果が反映されるものとされないものがあります。

ブロックレベル要素・インライン要素のどちらかを知っておかないと、設定したはずの効果が反映されない！というトラブルに見舞われたりするのでしっかり覚えましょう。

Contents

横幅100%で前後に改行が入る要素をブロック要素といい、ブラウザでは一つのかたまりとして扱われます。

ブロック要素は見出しや段落など、文章を構成する基本となる要素ということができ、ブロックレベルの中にはさらに別のブロックレベル要素やインライン要素を入れることができます。（p要素 hr要素タイプなど中にインライン要素しか入れられないものなどが存在します）

横幅は要素分で前後に改行が入らない要素をインライン要素といい、文章などの一部として扱われます。

インライン要素は、ブロックレベル要素の中で文字列、文字の装飾、ハイパーリンクなどに使われることが多く、その中身に文字列・インライン要素を含むことができまが、ブロックレベル要素を含むことができません。