すべての要素がコンテンツ・パディング・ボーダー・マージンからなるボックスであることを理解し、box-sizingを使いこなしましょう。
このレッスンを Kodokon で開くCSSでは、たとえ目に見えなくても、ページ上のすべての要素は長方形のボックスです。そのボックスには、壁に掛けた額入りの絵のように4つの層があります。コンテンツ（絵そのもの）、パディング（絵と額の間の白いマット）、ボーダー（額そのもの）、そしてマージン（額と壁の他の絵との間の空きスペース）です。これがボックスモデルと呼ばれるものです。
これらの層を制御するのは3つのプロパティです。padding はコンテンツとボーダーの間の内側のスペースを設定します。border はボーダーを描きます。太さ、スタイル（実線なら solid）、色を与えます。margin は外側のスペースを設定し、隣り合う要素を押しのけます。これらの距離はすべてピクセル（px）で表します。
.card {
padding: 16px;
border: 2px solid black;
margin: 24px;
}padding-top、padding-right、padding-bottom、padding-left で各辺を別々に調整でき、margin も同様です。省略記法もあります。2つの値を指定すると、1つ目は上下に、2つ目は左右に適用されます。つまり padding: 8px 16px; は上下に8ピクセル、左右に16ピクセルという意味です。
.card {
padding: 8px 16px;
margin-top: 32px;
margin-bottom: 8px;
}よくある落とし穴です。既定では、width: 200px; と書くと（width プロパティは幅を設定します）、その200ピクセルはコンテンツだけをカバーします。パディングとボーダーはその上に加えられるのです。width: 200px、padding: 16px、border: 2px のボックスは、実際には幅 200 + 16 + 16 + 2 + 2 = 236 ピクセルを占めます。box-sizing: border-box; プロパティがこれを解決します。宣言した幅にパディングとボーダーが含まれるようになります。ボックスは本当に幅200ピクセルになり、代わりに縮むのはコンテンツです。
* {
box-sizing: border-box;
}
.card {
width: 200px;
padding: 16px;
border: 2px solid black;
}box-sizing: border-box なしの場合、width: 100px、padding: 10px、border: 5px solid black のボックスが占める合計の幅はいくつですか？margin: 10px 20px; は何を意味しますか？