先生と生徒の会話形式で理解しよう

生徒

「先生、CSSで幅を300pxにしたはずなのに、実際のボックスが大きくなっちゃうんです。どうしてですか？」

先生

「それはパディング（padding）やボーダー（border）が関係していますよ。CSSのボックスモデルの仕組みを知ると、その理由がはっきりわかります。」

生徒

「ボックスモデル……？聞いたことはありますけど、正直よく分からないです。」

先生

「大丈夫！今日はパディングとボーダーでボックスのサイズが崩れる理由と、対処法を初心者でも分かるようにゆっくり説明しますね。」

1. ボックスモデルとは？パディングやボーダーの位置関係を理解しよう

CSSでは、すべてのHTML要素は「四角い箱（ボックス）」として扱われます。この考え方を「ボックスモデル」といいます。ボックスモデルには、いくつかの層（そう）があり、それぞれに役割があります。

構造は内側から順番に、コンテンツ → パディング（内側の余白） → ボーダー（枠線） → マージン（外側の余白）です。つまり、文字や画像などの中身（コンテンツ）に、パディングやボーダーが追加されていくイメージです。

この仕組みを知らずに「width:300px;」のように設定すると、思ったより大きく見えてしまうことがあるのです。

2. なぜパディングとボーダーをつけるとボックスサイズが崩れるの？

CSSの初期設定では、指定した幅（width）は「コンテンツ部分」だけの幅を表します。そのため、padding（内側の余白）やborder（枠線）の分は幅に含まれず、実際の見た目では合計サイズが大きくなってしまいます。

たとえば、下のようにwidthを300pxに指定し、さらにpadding:20pxとborder:5pxをつけた場合、実際の見た目の幅はどうなるでしょうか？


<style>
.box1 {
    width: 300px;
    padding: 20px;
    border: 5px solid #00796b;
    background-color: #b2dfdb;
}
</style>

<div class="box1">私は幅300pxに見えません。</div>

ブラウザ表示

この場合、左右にpaddingが20pxずつ、borderが5pxずつあるので、実際のボックス全体の幅は 300 + 20×2 + 5×2 = 350px になります。

つまり、パディングとボーダーを加えると、意図せずボックスが大きくなってしまうんです。

3. ボックスサイズがずれると起こるトラブル

このようなサイズのズレは、Webデザインでよく起こるトラブルの原因になります。

隣のボックスとずれて、レイアウトが崩れる
背景画像がずれて見える
レスポンシブデザインで幅が合わない

特に、初心者がCSSで「widthを指定したのに合わない」と悩むときは、このボックスモデルの影響であることが多いです。

4. 対処法①：box-sizingを使ってサイズを一定に保つ

この問題を解決するために使うのが、box-sizingというCSSプロパティです。これを使うと、paddingやborderを含めても、widthで指定したサイズ内に収まるようにできます。


<style>
.box2 {
    width: 300px;
    padding: 20px;
    border: 5px solid #00796b;
    background-color: #b2dfdb;
    box-sizing: border-box;
}
</style>

<div class="box2">box-sizingを使うと幅がきっちり300pxになります！</div>

ブラウザ表示

box-sizing: border-box;を指定すると、「borderやpaddingも含めた全体の幅」が300pxになるように計算されます。これにより、思った通りのサイズでデザインを崩さずに済みます。

5. 対処法②：全ての要素に一括で適用する

実際のWebサイト制作では、毎回box-sizingを個別に書くのは面倒ですよね。そのため、一般的にはすべての要素に対して共通で設定しておくのが便利です。


<style>
* {
    box-sizing: border-box;
}
</style>

このように書くことで、ページ全体の要素にbox-sizingが適用されます。最近のWeb開発では、この設定が「デフォルト」のように使われています。

6. パディングとマージンの違いもおさらい

パディング（padding）とマージン（margin）は混同しやすいですが、働きが違います。パディングは「内側の余白」、マージンは「外側の余白」です。ボーダー（border）はその間にある枠線です。

つまり、コンテンツ → パディング → ボーダー → マージンの順で構成されています。サイズが大きく見えるときは、どこに余白をつけたのかを確認してみましょう。


<style>
.example-box {
    width: 200px;
    padding: 20px;
    margin: 20px;
    border: 5px solid #4caf50;
    background-color: #e8f5e9;
}
</style>

<div class="example-box">これはパディングとマージン両方を持つボックスです。</div>

ブラウザ表示

このように、ボックスの見た目やサイズの計算は、どこに余白を設定したかによって変わります。CSSで整ったレイアウトを作るためには、この違いを理解しておくことが大切です。