BoxModel
要素のサイズに関わるプロパティーがどのような関係になるか定義したものをボックスモデルといいます（右図）。
このモデルは box-sizing プロパティーの設定によって変わるので注意が必要です。CSSデフォルトのボックスモデル（content-box）では、右図のようにwidthプロパティーがコンテンツエリアのみを指すしていて、直観的なボックスの幅（境界線まで）と一致しないという問題があります。そこで最近では、borderまでを含んだ幅をwidthとする border-box の利用が増えています。以下、content-box と border-box の違いを説明します。
はじめに margin と padding の確認
Webのレイアウト作業では、margin と padding という２種類の余白の違いを正しく把握する必要があります。以下、再確認です。
- margin 境界線の外側の余白
- border 境界線
- padding 境界線の内側の余白
- width, height 幅と高さ
ボックス・モデル１：content-box（default）
box-sizing: content-box;
| Space Occupied | ||||||
| margin | border | padding | width | padding | border | margin |
content-box は、CSSのデフォルト仕様です。CSS2 ベースで制作された既存の多くのサイトがこの仕様で設計されています。
ボックス・モデル２：border-box
box-sizing: border-box;
| Space Occupied | ||||||
| width | ||||||
| margin | border | padding | auto | padding | border | margin |
border-box はCSSデフォルトの仕様ではないため、サイト全体をこのモデルで構築するためには、CSSの先頭でユニバーサルセレクタを使い、以下のように初期化する必要があります。
*, *:before, *:after {
box-sizing: border-box;
}
ただし、ここで問題になるのは、過去の資産がすべて無駄になる・・ということです。CSSデフォルト（content-box）前提で書かれたCSSの流用時には、対象となる要素をすべて content-box 指定に修正しなくてはなりません。それは手間なので、対策として inherit 活用した以下のような書き方が多く採用されているようです。
html{
box-sizing: border-box;
}
*, *:before, *:after{
box-sizing: inherit;
}
box-sizing: border-box; は CSS3 で実現した仕様ですが、現在ではほぼすべてのブラウザで正しく解釈されます。
https://caniuse.com/#search=box-sizing
補足
日本語の環境では、全角スペースが要素と要素の隙間（終了タグと開始タグの間）に入ることで、レイアウトの邪魔をするというトラブルがよく発生します。ページ内に予期せぬ余白がある場合は、htmlのソースコード内に不要な全角スペースがないか確認して下さい。ソースコードのインデント(字下げ)には、TABや半角スペースで行って下さい。