ボックス
ボックスの概念
XHTMLとCSSを使うにあたり、ボックスという概念がどうしても付きまとう。
どちらかというと、視覚表現の部類に入るためCSSの管轄だが、XHTML記述の際にも多少ボックスの理解が必要なため、CSSカテゴリとは分けて考えることにする。
ややこしいかもしれないが理解していただきたい。
ボックスの構造
XHTMLとCSSでは、全ての要素が「ボックス」という領域を形成している。
全ての要素が、ボックスの外域である「マージン(margin)」、ボックスの外枠である「ボーダー(border)」、ボーダーの内側にある空白領域である「パディング(padding)」、そして内容である「コンテンツ(content)」、更にはボーダー以内の背景(background)という要素を持っている。
マージンとパディングについては、最初は少しわかりにくいかもしれないが、CSSレイアウトにおいてとても重要なものであるので理解していただきたい。
マージンは、そのボックスの「外側」の領域の余白であり、ボーダーより外側となる。この領域に関しては、背景関連プロパティを設定することは出来ない。
一方パディングはそのボックスの「内側」の領域の余白であり、ボーダーより内側となる。この領域は背景関連プロパティで設定した値が反映される。
この違いは非常に大切なので、しっかりと抑えておきたい。
また、マージンとパディングは、ブラウザによってその解釈の仕方が異なる場合があることも覚えておいていただきたい。（＞ブラウザの実装差異による）
ボックスの種類
XHTMLとCSSにおいて、全ての要素がボックスを備えることは前述したが、ボックスにもいくつか種類がある。
普段使うのは、「ブロック（またはブロックレベル）」、「インライン（またはインラインレベル）」の二つであろう。
この二つの違いを感覚的に説明するのは難しいが、「何も指定してないのに、勝手に改行される」ものがブロック、そうでないものがインラインだという大雑把な把握でいいだろう。
インラインボックス（子要素）は、ブロックボックス（親要素）に包含され、親要素の範囲で自動的に改行や折り返しをされて表示される。（body直下のインライン要素は？という質問は愚問である。body要素自体がブロックボックスであると考えていただきたい。そもそも、XHTMLの構造化という考え方において、body直下にインライン要素がくることは、構造的におかしいことになる。）
ランインボックスは、その要素のあとにブロックボックスが続く場合、あとに続くブロックボックスに包含されるインライン要素としてボックスを生成する。
つまり、‹element1›あるテキスト‹/element1›‹element2›あるテキスト２‹/element2›とあり、両方がブロックボックスである場合、element1はelement2のインライン要素として扱われるのである。
尚、ランインボックスは現状サポートしていないブラウザが多いため、使用しないのが無難である。
特殊な要素 li要素
リストを記述するli要素は特殊な形状をしている。
リストのマークを表示するブロックボックス、リストの内容を表示するインラインボックスという形状である。
リストのマークと内容で一つのブロックボックスとなり、更にその中でリストマークで独立したブロックボックスを持っていることとなる。
リストのマークについても、ブラウザによってはボックスの解釈の仕方が異なることも注意していただきたい。
