CSSでパディングとボーダーを使うとボックスサイズが崩れる理由と対処法を徹底解説！初心者でも安心の入門講座

パディングとボーダーでボックスサイズが崩れる理由と対処法

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

生徒

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

先生

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

生徒

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

先生

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

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

CSSを学ぶ上で最も重要といっても過言ではないのが「ボックスモデル」という考え方です。Webページ上のすべての要素（見出し、文章、画像など）は、実は目に見えない「四角い箱（ボックス）」の中に収まっています。

このボックスは、単純な1つの箱ではなく、以下の4つの層が重なり合って構成されています。この構造を正しく理解することが、レイアウト崩れを防ぐ第一歩です。

コンテンツ (Content)： 文字や画像など、中身そのものが入る領域
パディング (Padding)： コンテンツと枠線の間にある「内側の余白」
ボーダー (Border)： ボックスを囲む「枠線」
マージン (Margin)： 他の要素との間にある「外側の余白」

初心者が特につまずきやすいポイントは、「width（幅）を指定しても、それは1のコンテンツ部分にしか適用されない」という点です。図をイメージすると分かりやすいですが、幅300pxと指定した後にパディングやボーダーを追加すると、それらは外側に「肉付け」されるため、結果的にボックス全体がどんどん巨大化してしまうのです。

実際のコードで、マージン以外の要素（コンテンツ・パディング・ボーダー）がどのように重なっているか見てみましょう。


<style>
    .box-model-demo {
        /* コンテンツの幅 */
        width: 200px;
        /* 内側の余白（水色の部分） */
        padding: 20px;
        /* 枠線（太い緑の線） */
        border: 10px solid #2e7d32;
        /* 背景色 */
        background-color: #e8f5e9;
        /* わかりやすくするための余白 */
        margin: 10px;
    }
</style>

<div class="box-model-demo">
    ここがコンテンツ領域です。この周りにパディングとボーダーが重なっています。
</div>

ブラウザ表示

この例では、幅を200pxに設定していますが、実際には左右に20pxずつのパディングと10pxずつのボーダーが足されています。その結果、目に見えるボックスの横幅は合計260px（200 + 20×2 + 10×2）になっているのです。この「算数」の感覚を掴むことが、思い通りのデザインを作るコツになります。

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で整ったレイアウトを作るためには、この違いを理解しておくことが大切です。