ボックスモデル

カスタム検索

ボックスモデル

CSSには、ボックスモデルという大切な考え方があります。ボックスモデルとは、「HTMLやXHTMLで定義された要素は全て長方形のボックスの中に納められている」という考え方です。言い方を変えれば、「要素はボックスも定義している」ということになります。

下の図を見てください。<body>要素は1つのボックスに納められ、その他の要素をネストしています。その他の要素もそれぞれのボックスに納められています。HTMLやXHTMLでネストの構造を理解されていればこの考え方はよく分かると思います。

<body>要素

<div>要素

</div>

</body>

ボーダー、マージン、パディング

ボックスモデルの考え方で、要素はボックスの中に納められている（表示されている）と考えます。このボックスには、

があります。下の図はこれら3つを表したものです。

ボーダー、マージン、パディングを表した図。ボーダーは枠線、マージンは余白、パディングは要素から枠線までの余白を表す。

要素（表示される領域）には、ボーダー（枠線）があり、ボーダーから外がマージン（余白）で、要素からボーダーまでがパディング（詰め物としての余白）です。これらを指定するには、

を使用します。