外側から margin → border → padding → content。各層にマウスを乗せると輪郭が強調されます。デザイナーの言葉に置き換えると、marginは「隣との距離」、paddingは「中身のゆとり」です。

width: 200px を指定した同じ箱を、box-sizing の設定違いで並べています。スライダーで padding と border を増やすと、content-box は箱が膨らみ、border-box は200pxのまま中身が縮むのがわかります。レイアウトが崩れない border-box が現代の標準です。

同じボタンでもpaddingで印象が一変します。「窮屈」と感じたらpaddingを増やす。上下左右を個別指定するときは 時計回り（上→右→下→左） の順です。

marginは要素どうしの心理的な距離。近いほど「関係が深い」、遠いほど「別の話」に見えます（近接の原理）。左右をautoにするとブラウザが余白を等分し、中央揃えになります。

並べる要素の間隔はgap、単体の要素の距離はmargin。marginで並べると最後の要素の外側に余白が余りますが、gapは要素の「間」だけに効きます。

一流のサイトは余白を場当たりで決めません。4pxまたは8pxの倍数の段階（スケール)だけを使うと、ページ全体に統一されたリズムが生まれます。「13pxと15pxの余白が混在」のような迷いがなくなるのが最大の効果です。

要素の並び方の性質。blockは幅いっぱいに広がり縦に積まれる、inlineは文中に流れる、inline-blockは文中に並びつつサイズ指定が効く中間形。横並び・格子はflex/gridの出番です。

中身が枠を超えたときの振る舞い。hiddenは潔く切る、autoはスクロールで読ませる、visibleはそのまま溢れる（崩れの原因）。横長のテーブルはoverflow-x: autoで横スクロールが定石です。