padding と高さの関係を“正しく理解するとレイアウトが安定する”
padding は「内側の余白」ですが、高さ（height）とどう関係するかを理解していないと、要素が思ったより大きくなったり、逆に高さが足りなくなったりします。
特に box-sizing の設定によって挙動が大きく変わるため、初心者がつまずきやすいポイントです。
ここでは、CSS と Tailwind CSS の両方で、padding と高さの関係を丁寧に解説します。
padding と height の基本関係
height は「content の高さ」を指す（content-box の場合）
CSS の初期設定は box-sizing: content-box です。
.box {
height: 100px;
padding: 20px;
background: #ddd;
}
この場合、実際の高さはこうなります。
- content（100px）
- padding（20px × 2 = 40px）
- border（あれば加算）
合計 140px になります。
つまり、padding は height に含まれないため、
指定した高さより大きくなるのが標準挙動です。
border-box の場合はどうなる？
.box {
box-sizing: border-box;
height: 100px;
padding: 20px;
}
この場合、全てを含めて 100px に収まります。
- content（100 – 40 = 60px）
- padding（20px × 2）
- border（あれば含まれる）
つまり、padding を増やすと content が縮むという挙動になります。
Tailwind CSS の場合
Tailwind はデフォルトで box-sizing: border-box が適用されています。
つまり、次のように書くと…
<div class="h-24 p-5 bg-gray-300"></div>
高さは h-24（96px）に padding を含めた値になります。
padding を増やしても高さは変わらず、
内部の content が縮むだけです。
padding と height の関係を理解するための例
例1：高さが思ったより大きくなる（content-box）
.box {
height: 100px;
padding: 30px;
background: #ddd;
}
実際の高さは 160px。
初心者が「height を指定したのに大きくなる！」と悩む典型例です。
例2：高さが変わらない（border-box）
.box {
box-sizing: border-box;
height: 100px;
padding: 30px;
background: #ddd;
}
実際の高さは 100px のまま。
Tailwind ではこれが標準挙動です。
例3：padding だけで高さを作る（height を指定しない）
.box {
padding: 40px 0;
background: #ddd;
}
この場合、要素の高さは padding の合計（80px） になります。
Tailwind ではこう書きます。
<div class="py-10 bg-gray-300"></div>
padding と height の関係で起きやすい問題と解決策
問題1：高さが overflow してしまう
.box {
height: 100px;
padding: 40px;
}
→ content が 20px しか残らず、テキストがはみ出す。
解決策
- height を使わず padding で高さを作る
- min-height を使う
- border-box を使う
問題2：flex や grid の高さが崩れる
flex や grid の子要素に padding を付けると、
content-box の場合は高さが膨らんで崩れることがあります。
解決策
- border-box を使う（Tailwind は標準で OK）
- height を指定しない（auto に任せる）
- min-h-* を使う
問題3：ボタンの高さが揃わない
padding が違うと高さが変わるため、
ボタンの高さが揃わないことがあります。
解決策
- padding を統一する
- line-height を使う
- flex で中央揃えにする
実践例：カードの高さを安定させる
CSS版
.card {
box-sizing: border-box;
height: 200px;
padding: 20px;
background: #fff;
border-radius: 10px;
}
Tailwind版
<div class="h-52 p-5 bg-white rounded-xl box-border">
カード内容
</div>
Tailwind は border-box が標準なので、box-border は省略しても同じ挙動になります。
padding と height の関係を深掘り
1. height は「content の高さ」である（content-box の場合）
初心者が最も誤解しやすいポイントです。
height = content
padding = content の外側
border = padding の外側
この構造を理解すると、挙動が直感的になります。
2. border-box は「見た目の高さ」を指定できる
border-box の場合は、
height = content + padding + border
となるため、
見た目の高さをそのまま指定できるのが最大のメリットです。
3. Tailwind は border-box が標準なので扱いやすい
Tailwind を使うと、
padding を増やしても高さが変わらないため、
レイアウトが崩れにくくなります。
これは Tailwind が初心者にも扱いやすい理由のひとつです。
まとめ
padding と高さの関係は、CSS レイアウトの基礎でありながら、
理解していないとレイアウト崩れの原因になります。
- content-box → padding は height に含まれない
- border-box → padding を含めて height が決まる
- Tailwind は border-box が標準
- padding だけで高さを作ることもできる
- height を指定すると content が縮む可能性がある
