要素に padding を指定したら、意図せず高さや幅が膨らんでしまった経験はありませんか？これは CSS の「ボックスモデル」の仕組みによるもので、特に box-sizing の指定が効いていないときに起こりやすい現象です。この記事では、padding が高さを押し広げる原因と、それを防ぐための実装方法を詳しく解説します。
なぜ padding で高さが変わるのか
CSS のデフォルトでは box-sizing: content-box; が適用されます。この場合、width や height は「内容領域（content box）」だけを指し、padding や border は含まれません。そのため、padding を追加すると高さ・幅が実寸より膨らんでしまいます。
.box {
width: 200px;
height: 100px;
padding: 20px;
background: lightblue;
}
上記の要素は高さ 100px として指定されていますが、実際には 100px + padding-top + padding-bottom = 140px になってしまいます。
解決策1：box-sizing: border-box を指定する
最も一般的な対処法は box-sizing: border-box; を指定することです。この設定では width や height に padding と border を含めるようになり、サイズが膨らむのを防げます。
.box {
width: 200px;
height: 100px;
padding: 20px;
box-sizing: border-box;
background: lightgreen;
}
これにより、見た目上は常に指定した幅・高さを維持できます。多くの CSS リセットやフレームワークでは、全要素に対して box-sizing: border-box; を指定するのが一般的です。
*, *::before, *::after {
box-sizing: border-box;
}
解決策2：高さを固定せずに自動調整する
高さを固定値で指定する代わりに、height: auto; を利用すれば padding を含めて自然に高さが伸びるようになります。コンテンツが可変の場合はこちらの方が適しています。
.box {
width: 200px;
padding: 20px;
height: auto; /* 高さは中身に応じて変化 */
background: lightcoral;
}
解決策3：min-height を活用する
高さを最低限確保しつつ、padding や中身の増減に応じて伸縮させたい場合は min-height を使う方法があります。
.box {
width: 200px;
min-height: 100px;
padding: 20px;
box-sizing: border-box;
background: lightyellow;
}
box-sizing が効かないときのチェックポイント
box-sizing: border-box; を指定したのに思った通りに動かない場合、以下を確認しましょう。
- セレクタの優先度が低く、他のスタイルに上書きされていないか
- ユーザーエージェントスタイルや外部ライブラリで
content-boxに戻されていないか iframe内や Shadow DOM 内など、適用範囲が限定されていないか
まとめ
padding で高さが変わるのは、CSS のデフォルトが content-box だからです。これを防ぐには box-sizing: border-box; を利用し、場合によっては高さを固定せず auto や min-height を使うのが効果的です。サイト全体で統一したサイズ管理を行うために、リセット CSS として *, *::before, *::after { box-sizing: border-box; } を指定しておくのがおすすめです。
