【CSS入門】ボックス構造について

HTMLで使用される要素のほとんどはボックスと呼ばれる領域で内容が表示されます。そのボックスを使って画像やテキストの表示、境界線や背景をつけたりして、レイアウトやデザインを行っていきます。それでは、ボックスの構造を少し見てみましょう。

ボックスの構造

ボックスは、内容を表示する領域と境界線、内側と外側の余白で構成されています。境界線はborder（ボーダー）、内側の余白はpadding（パディング）、外側の余白はmargin（マージン）と言います。

上記の図のようにボックスは作られます。例えば幅300pxの中にコンテンツを表示させたいとします。そして、コンテンツをボーダーで囲って内側に余白を取るといったデザインにします。

.box {
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
}

こうするとどうでしょう。これでは300pxの中に内容は収まりません。先程の通り、ボックスは内容を表示する領域ではなく、余白なども含めたものがボックスとなるからです。この場合だと、ボックスは内側の余白20pxと左右のボーダー2pxを足した322pxで成形されます。ということで、300pxで収めたいときには、以下のように指定する必要があります。

.box {
  width: 278px;
  padding: 10px;
  border: 1px solid #ccc;
}

このようにすると、300pxの中にコンテンツを表示させることができます。

以上が、ボックス構造についての簡単な説明となります。ボックスを使ったレイアウトをする際には表示領域を意識して作りましょう。どうしてもレイアウトが崩れてしまうという場合には、「box-sizingでカラム落ちさせない方法」も参考にしてみてください。