CSSのボックスモデルを理解しよう

CSSには、「ボックスモデル」という概念があります。これは、空間領域を示すための考え方で、これを理解しないと正しくレイアウトすることができません。Webデザインの基本ともいえる概念ですから、必ず理解をするようにしましょう。

まず、HTMLのすべての要素は、ボックスという箱で構成されています。そして、それぞれに領域が決まっていますから、CSSで値を変更することによって、自由にレイアウトすることが出来るわけです。

10141017-4

詳しく見ていくと、1つのボックスの中には4つの領域があります。

content(内容) 要素が入るコンテンツの中身
padding(パディング) コンテンツと枠の間の余白
border(ボーダー)
margin(マージン) 枠の外の余白

そして、それぞれに上下左右(top,bottom,left,right)の4辺があり、CSSで個別に指定することが可能です。

 

サイズの計算方法

ボックスを作るときには、CSSで幅や高さを指定しますが、それがそのまま反映されるわけではありません。「content」「padding」「border」「margin」をそれぞれ足した値が、横幅や高さとなるわけです。

具体的には、ボックスの横幅は、「内容+左右のパディング+左右のボーダー幅+左右のマージン」となります。そして、ボックスの高さは、「内容+上下のパディング+上下のボーダー幅+上下のマージン」となります。

なので、ちゃんと計算して幅や高さの指定をしないと、自分の予想よりサイズがオーバーすることがあります。

10141017-5

ちなみに、背景色や背景画像を指定した場合は、「content」「padding」「border」の領域まで適用されます。「margin」は枠の外ですから、背景色は反映されません。ただ、ボックスの外に背景色の指定があれば、「margin」に適用されます。

サブコンテンツ

このページの先頭へ