【CSS】ボックスモデル

      2016/08/15


CSSボックスモデルは、CSSによるレイアウトの基礎となる考え方です。

CSSボックスモデル

CSSボックスモデル

HTMLの要素は以下の4つの領域で構成されています。

  1. コンテンツ領域
  2. パディング領域
  3. ボーダー領域
  4. マージン領域

CSS2.1以前

CSS2.1まではwidth、heightプロパティは、コンテンツ領域のサイズなので実際の長さはパディング、ボーダー、マージンの分が足されます。

そのため、コンテンツ領域の幅だけ考えてサイズを指定してしまうと、領域が収まりきらず、レイアウトが崩れてしまう事があります。

CSS3では

CSS3になり、widthとheightの領域を、box-sizingプロパティで指定できるようなっています。

box-sizingプロパティで指定できる値は以下のものがあります。

説明
content-box コンテンツ領域(従来通り)のサイズ
padding-box(※1) コンテンツ領域~パディング領域までのサイズ
border-box コンテンツ領域~ボーダー領域までのサイズ

(※1) 2016.6.23現在、padding-boxについてはFireFoxでは、設定どおりになりcontent-boxやborder-boxとの違いを確認できました。
ただ、chromeとIE11では、設定しても、エラー扱いになっているようです。
いずれFireFoxでも使用できなくなるかもしれませんね。

使用例

(HTML)
			<div id="box1" class="box">box1</div>
			<div id="box2" class="box">box2</div>
			<div id="box3" class="box">box3</div>
		
(CSS)
			.box {
			    width: 100px;
			    height: 100px;
			    padding: 5px;
			    margin: 0px;
			}
			#box1 {
			    border: 10px solid red;
			    box-sizing: content-box;
			}
			#box2 {
			    border: 10px solid green;
			    box-sizing: padding-box;
			}
			#box3 {
			    border: 10px solid blue;
			    box-sizing: border-box;
			}
		
(実行結果)
box1
box2
box3

まとめ

border-boxを指定しておくとborderの幅を変更した時に、コンテンツの幅を自分で再計算して指定しなおす必要がないのでとても便利です。

 - css ,