ブロックレベル要素/インライン要素 : XHTML

Tweet

Pocket

XHTML(HTML)の各要素は、ブロックレベル要素とインライン要素に分類できます。ブロックレベル要素とインライン要素は、大きな違いがあります。

ブロックレベル要素(p,ul,li,tableなど)

ブロックレベル要素は前後に改行が入り、長方形のブロックとしてHTMLドキュメントの上から順に配置されます_※1。ブロックレベル要素はインライン要素を子要素として含むことができます。ブロックレベル要素がブロックレベル要素を子要素として含むことができるかどうかは、要素ごとに異なります_※1。

※1:正確には、ブロックレベル要素は抱含ブロックの中に上から順に配置されます。左右に配置する場合は、CSSのfloatプロパティで制御します。
※2:p要素,h1～h6要素,address要素などは子要素としてインライン要素しか持つことができません。

インライン要素

ブロックレベル要素の内容として用いられ、行の一部として配置されます。インライン要素の中にブロックレベル要素を含むことはできません。インライン要素は次の2種類に分けることができます。

非置換インライン要素(span,a,em,iなど)

非置換インライン要素はwidth,height,line-height,borderを指定できません_※1。

※1:非置換インライン要素にwidth,heigth,line-height,borderなどを指定する場合は、
a { display: block; }
のようにスタイルシートで表示方法をブロックレベル要素的にする必要があります。
また非置換インライン要素はwidthを指定できないためtext-alignなどの指定もできません。

置換インライン要素(img,inputなど)

置換インライン要素にはwidth,height,line-height,borderを指定できます。

参考URL

»Web標準普及プロジェクト
»海月屋 HTMLリファレンス