この記事は人間が書きました
はじめに
こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。
「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca
box-sizing の設計モードによる違い
ある要素に width: 200px; というスタイルが指定されている時、その要素にさらに padding: 20px; と border: 10px solid black; を追加した際、そのボックスが画面上で占める最終的な横幅は合計で何pxか？
という問題は、CSS の box-sizing の設計モードによって答えが2つあります。
box-sizing: content-box：デフォルトの挙動
これは CSS のデフォルトの計算方法です。指定した width はコンテンツ（中身）の幅だけを意味し、padding と border はその外側に追加されます。
-
width：200px -
padding：20px（左）+ 20px（右）= 40px -
border：10px（左）+ 10px（右）= 20px - 合計：200px + 40px + 20px = 260px
この方法は直感的でなく、「200pxの箱を作りたいのに、paddingを追加したら全体の幅が変わってレイアウトが崩れたという原因になりがちです。
box-sizing: border-box：モダンな挙動
先ほどの方法と比較して、こちらは直感的な計算方法です。指定した width が、border まで含めた最終的な幅になります。
padding と border は、指定した width の内側に作られます。
- 合計：200px
- その代わり、内側のコンテンツ領域が自動で縮小される
この方法はレイアウト計算が非常に楽になるため、最近のWeb制作では全ての要素に border-box を指定することが多いです。
/* 全ての要素にborder-boxを適用するおまじない */
*, *::before, *::after {
box-sizing: border-box;
}
作成したコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フロントエンド1000本ノック 0021</title>
</head>
<body>
<main>
<h1>2つのbox-sizingの違い</h1>
<section>
<h2>box-sizing: content-box</h2>
<div style="width: 200px; padding: 20px; border: 10px solid red; box-sizing: content-box;"></div>
<p>width: 200px; padding: 20px; border: 10px solid red; box-sizing: content-box;</p>
<p>合計の幅が260pxになる</p>
</section>
<section>
<h2>box-sizing: border-box</h2>
<div style="width: 200px; padding: 20px; border: 10px solid red; box-sizing: border-box;"></div>
<p>width: 200px; padding: 20px; border: 10px solid red; box-sizing: border-box;</p>
<p>合計の幅が200pxになる</p>
</section>
</main>
<footer>
<p>Copyright 2025</p>
<p>フロントエンド1000本ノック</p>
</footer>
</body>
</html>