CSSのpaddingをつけても横幅が広がらないようにする方法
CSSで要素にpadding
を追加すると、通常はその分だけ要素の横幅が広がってしまいます。
box-sizing: border-box;
を指定することで、横幅を固定したまま padding
を適用することが可能です。
1. デフォルトの動作
CSSのデフォルトでは、要素の width
は content-box
で計算されます。
これは、 padding
や border
の分が追加されるため、指定した width
よりも実際の横幅が大きくなります。
.box {
width: 200px;
padding: 20px;
border: 1px solid #000;
}
この場合、実際の要素の横幅は 200px + 20px + 20px = 240px となり、意図しないレイアウト崩れの原因になることがあります。
2. box-sizing: border-box; で解決
この問題を防ぐには、 box-sizing: border-box;
を適用します。
.box {
width: 200px;
padding: 20px;
box-sizing: border-box;
border: 1px solid #000;
}
この場合、padding
を含めても width: 200px
が維持されるため、レイアウトが崩れません。
3. ページ全体に適用する場合
すべての要素に border-box
を適用したい場合は、以下のように *
セレクタを使用するのが便利です。
* {
box-sizing: border-box;
}
これにより、すべての要素が border-box
で計算され、予期しない横幅の変化を防ぐことができます。
まとめ
- デフォルト
padding
やborder
を追加すると、要素が指定したwidth
よりも広がる。 -
border-box
を使うとwidth
の中にpadding
やborder
が含まれるため、横幅が変わらない。 - ページ全体に適用するなら
* { box-sizing: border-box; }
を使うと便利。
これを活用することで、余計なレイアウト崩れを防ぎ、スムーズなデザイン調整が可能になります!