同じ16pxの余白を比べる
ボタンの周囲へ余白を足しても、その全部が押せる場所になるとは限りません。中身を16×16px、枠線を0に固定した自作実験では、paddingを上下左右16pxにしたボタンの枠は48×48px、marginを16pxにしたボタン自体は16×16pxでした。
中央と周囲を押してみる
- それぞれの緑の中央を押します。両方とも「押した回数」が増えます。
- padding側で、丸い印から離れた緑の余白を押します。そこもボタンの内側なので回数が増えます。
- margin側で、小さな緑の外にある灰色の場所を押します。ボタンの外側なので、その回数は増えません。
- 「回数を0へ戻す」でやり直します。Tabでボタンへ移り、SpaceやEnterでも押せます。
色は範囲を見分ける補助で、各ボタンの名前と寸法も表示しています。ここにある小さいボタンは実験用です。本番へ16pxの操作部品をそのまま使う提案ではありません。
内側と外側の違い
paddingは内容と境界の間、marginは境界の外側に空間を作ります。この例のpadding側は16＋16＋16＝48pxです。margin側は周囲との間隔が広がりますが、ボタンの枠は16pxのままです。
.button {
box-sizing: content-box;
width: 16px; height: 16px; border: 0;
}
.padding { padding: 16px; margin: 0; }
.margin { padding: 0; margin: 16px; }この寸法はcontent-box・枠線0・固定幅という条件の結果です。border-box、最小サイズ、行の高さ、他の要素の重なりがある場合まで、同じ計算で決まるとは限りません。見た目だけでなく実際の枠と操作結果を確かめます。
実装時の注意と確認範囲
内側を広げることと、隣の操作から離すことは両方必要です。paddingだけを増やしても、別の要素に覆われたり、操作同士が近すぎたりする問題は別に残ります。MDNのbutton資料では操作領域と隣接する操作の間隔も案内しています。
2026年10月17日、PCの通常クリックで中央・内側の余白・外側の空間を比較し、キーボード操作とリセットを確認しました。自作HTML・CSS・JavaScriptはCC0、外部ライブラリ・通信は不要です。スマホ実機、すべてのブラウザ、支援技術での検証は未実施です。最近流行していると断定する記事ではありません。