【CSS】ブロック要素の大きさがpaddingで勝手に変わる問題

はじめに

cssでマークアップをしていると、ブロック要素の大きさ（幅、高さ）を指定しているのに、paddingを効かせるとブロック自体の大きさが余計に大きくなってしまうことがないですか？

それを解消する方法を紹介します。

現象

具体的にどんなことが起こるか見てみましょう！
まずは適当な大きさのブロックを用意します。

htmlファイル

<div class="block">
  ブロック要素です
</div>

cssファイル

.block {
  height: 100px;
  width: 160px;
  background-color: lightblue;
}

ここまでは特段問題ないですね。
これにpaddingを効かせると、その分ブロック要素も広がってしまいます。

cssファイル

.block {
  height: 100px;
  width: 160px;
  padding: 20px;
  background-color: lightblue;
}

これだとpaddingの変更に合わせてブロック自体の大きさも変更していく必要があり、かなり面倒です。直感的にもpaddingはブロック要素の内側だけ余白をつけるように動作してほしいですよね。

対策

プロパティにbox-sizing: border-box;をつけるだけです。
実際にやってみましょう！

cssファイル

.block {
  box-sizing: border-box;
  height: 100px;
  width: 160px;
  padding: 20px;
  background-color: lightblue;
}

うまくいってますね！
ブロック要素全部に記述するのは面倒なので、実際の使い方としては、* { box-sizing: border-box; }みたいにデフォルトで全部に効くようにしておくと良いかと思います。

最後に

簡単な内容ですが、初学者は特に知らないと苦労するポイントだと思います。
自由にCSSを操れるように頑張りましょう！