ボックスモデルしたい（box-sizing）

/* どちらも width: 300px */
.content-box {
    box-sizing: content-box;  /* 初期値 */
    width: 300px;
    padding: 20px;
    border: 5px solid;
    /* 見た目の幅は 300 + 20*2 + 5*2 = 350px */
}

.border-box {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 5px solid;
    /* 見た目の幅は 300px */
}

box-sizingプロパティで、widthやheightで指定した数値の基準を変更できます。 初期値はcontent-boxで、いちばん内側のcontent（内容）の幅が基準となっています。

参考

• 余白したい（padding）

• 余白したい（margin）

• 枠線したい（border）

見た目の幅を基準にしたい（border-box）

*,
*::before,
*::after {
    box-sizing: border-box;
}

box-sizing: border-boxで、widthとheightの基準をcontent + padding + borderに変更できます。 paddingとborderが基準の内側に含まれるため、指定した数値がそのまま見た目の幅になります。

box-sizingは継承されないプロパティなので、*（すべての要素を選ぶセレクター）と擬似要素にまとめて指定します。 新しくCSSを書き始めるときは、まずこれを書いておくと余白まわりの計算で悩まなくなります。

Tip

border-boxのほうが「指定した数値＝見た目の幅」で計算しやすいため、 多くのCSSフレームワークやリセットCSSは、この指定を最初に入れています。

すべてのHTML要素は「長方形の箱」として配置されます。 これは、CSSレイアウトの大前提です。 この箱は、内側から「内容（content）」「内側の余白（padding）」「枠線（border）」「外側の余白（margin）」の4つの層でできています。 要素の大きさや余白は、それぞれの層をどれだけ広げるかで決まります。

+-----------------------------------+
|             margin                |  外側の余白（他の要素との間隔）
|  +-----------------------------+  |
|  |          border            |  |  枠線
|  |  +-----------------------+  |  |
|  |  |       padding         |  |  |  内側の余白（枠線と内容の間隔）
|  |  |  +-----------------+  |  |  |
|  |  |  |    content      |  |  |  |  内容（文字や画像）
|  |  |  +-----------------+  |  |  |
|  |  +-----------------------+  |  |
|  +-----------------------------+  |
+-----------------------------------+

デフォルトのcontent-boxはcontentの幅を基準とするため、paddingやborderを広げると、見た目の幅が大きくなります。

リファレンス

• box-sizing

• ボックスモデル入門