目次
ボックスモデルとは
HTMLのすべての要素（見出し、段落、画像など）は、四角い箱（ボックス）に入っていると考えることができます。
この箱の構造がどうなっているかを知ることで、デザインのレイアウトや余白を自在に操れるようになります。
以下は、ボックスモデルの図です。
１．コンテンツエリア (Content)
テキストや画像が表示されるエリアです。
width（幅）やheight（高さ）でサイズを指定します。
２．パディング (padding)
コンテンツエリアとボーダーの間の余白部分です。
背景色はpadding領域まで塗られます。
３．ボーダー (border)
要素の枠で、境界線（枠線）です。
線の太さ、種類、色を指定できます。
４．マージン (margin)
ボーダーの外側にある余白です。
隣の要素と距離を取るために使用します。
背景色や背景画像はこの部分には表示されません。
よく使う設定（border-box）
CSSに「box-sizing: border-box;」と記述するのが一般的です。
これを書くと、widthの中にpaddingとborderを含めるという設定になり、計算が楽になります。
例
以下の設定の時、
width:200px
padding:20px
border:5px
「box-sizing: border-box;」の場合、見た目の横幅は200px
「box-sizing: content-box;」の場合、見た目の横幅は250px (200+20*2+5*2)
Chromeでボックスモデルを確認する
Google Chromeのデベロッパーツールでボックスモデルを確認できます。
Google Chromeを立ち上げてF12キーを押し→「Elements」→「Computed」をクリックすると表示されます。
青がコンテンツ、緑がpadding、黄色がborder、オレンジがmarginです。
関連の記事