box-sizing: border-box; は、要素の幅と高さを計算する方法を指定する CSS プロパティです。

box-sizing プロパティには、以下の 2 つの値があります。

• content-box: デフォルト値。要素の幅と高さは、コンテンツ領域のみを含みます。パディングとボーダーは含まれません。
• border-box: 要素の幅と高さは、コンテンツ領域、パディング、ボーダーを含みます。

つまり、box-sizing: border-box; を設定すると、要素の幅と高さにパディングとボーダーの幅が加算されます。

例

.box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid #000;
  box-sizing: content-box; /* デフォルト値 */
}

上記のように設定した場合、.box 要素の幅は 100px ですが、実際に表示される幅は 120px になります。これは、コンテンツ領域の幅 100px に、パディングの幅 10px とボーダーの幅 10px が加算されるためです。

.box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid #000;
  box-sizing: border-box;
}

一方、上記のように設定した場合、.box 要素の幅は 120px になります。これは、コンテンツ領域の幅 100px に、パディングの幅 10px とボーダーの幅 10px が最初から含まれているためです。

box-sizing: border-box; を設定する利点

• パディングやボーダーの影響を受けずに、要素の幅と高さを設定できる。
• レイアウトが崩れるのを防ぐことができる。
• コードがより読みやすくなる。

box-sizing: border-box; を設定する注意点

• 古いブラウザでは対応していない場合がある。
• レイアウトを変更する場合は、注意が必要になる。

プログラミングスクールSkillHacks・動画編集スクールMovieHacks