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 となり、意図しないレイアウト崩れの原因になることがあります。

この問題を防ぐには、 box-sizing: border-box; を適用します。

.box {
  width: 200px;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #000;
}

この場合、padding を含めても width: 200px が維持されるため、レイアウトが崩れません。

すべての要素に border-box を適用したい場合は、以下のように * セレクタを使用するのが便利です。

* {
  box-sizing: border-box;
}

これにより、すべての要素が border-box で計算され、予期しない横幅の変化を防ぐことができます。

これを活用することで、余計なレイアウト崩れを防ぎ、スムーズなデザイン調整が可能になります！