ノマドな海外移住計画
歩き続けること
公開日:2019.03.29
/ 最終更新日:
HTML, CSS

CSSでデザインが崩れた!余白paddingが原因のデザイン崩れは、一瞬で解決できる

CSSを書いていると

悩み

あれ、デザイン崩れた…なんでや…

なんてことは、よくありますよね。
原因がすぐわかればいいんですが、そうでないときもしばしば。

そんなときは、まず余白(padding)を気にしてみてください。

* {
  box-sizing: border-box;
}

↑のCSSを追加するだけで、余白がからんだデザイン崩れが一気になくりますよ。

藤ミヤチ
藤ミヤチ

すぐ解決できるので、本当におすすめ!

CSSの余白paddingが問題になるのは、要素のサイズがおかしくなるから

CSSで余白をつけるときは、marginとpaddingを使いますよね。

実は、何も対策をしていないとpaddingはデザイン崩れの原因になりやすいんです。

疑問

なんでpaddingが問題になる?

どういうことか、説明していきますね。

余白paddingの罠

まず、試しに幅が200pxの箱を3つ用意してみます。

<div class="container">
  <p class="box">.box<br />横幅200pxの箱</p>
  <p class="box">.box<br />横幅200pxの箱</p>
  <p class="box">.box<br />横幅200pxの箱</p>
</div>
/* 箱 */
.box {
  width: 200px;
  border: 3px solid #ff0000; /* わかりやすいように線を引く */
}
.box 横幅200pxの箱

まあ、なんの変哲もないです。

ここで、最後の箱にだけpaddingを設定します。

<div class="container">
  <p class="box">.box<br />横幅200pxの箱</p>
  <p class="box">.box<br />横幅200pxの箱</p>
  <p class="box padding">.box<br />横幅200pxの箱</p>
</div>
/* 箱 */
.box {
  width: 200px;
  border: 3px solid #ff0000; /* わかりやすいように線を引く */
}

/* 余白設定 */
.padding {
  padding: 20px;
}
.box 横幅200pxの箱
横幅200pxの箱...?

・・・ん?

悩み

横幅widthは変えてないのに、なんで最後の箱だけおおきくなるん?

何故か勝手に、最後のpaddingを設定した箱だけ横幅が200pxよりも大きくなってしまいました。

実は、ブラウザは、余白を↓のように扱います。

横幅が200px + 左の余白paddingが20px + 右の余白paddingが20px
合計すると横幅240pxの箱だね!

悩み

・・・ちがうんや。
あくまで幅は200pxで、その内側に20pxずつの空白が欲しいんや。

余白paddingが原因で、デザイン崩れが起きないようにするCSS

余白paddingが悪さをするのであれば、さきにブラウザのpaddingの扱い方を変えてもらいましょう。

横幅が200px + 左の余白paddingが20px + 右の余白paddingが20px
合計すると横幅240pxの箱だね!

ではなく、

横幅が200px。
その中に左の余白paddingが20px、右の余白paddingが20px
だから実際に箱の中身を表示できるエリアの幅は160pxになるね!

という形にしてもらいます。

つまり、人間の自然な考え方に合わせて、ブラウザに幅を計算してもらおう、ということ。

だって楽にコーディングしたいじゃん。

具体的には↓のCSSを追加することで解決します。

* {
  box-sizing: border-box;
}

すべてのHTML要素に、余白の扱い方を変えてもらうCSSです。
さきほど、勝手に横幅が大きくなっていたところも解決します。

.box 横幅200pxの箱
.box .padding 横幅200pxの箱

これを適用すると、paddingが原因のデザイン崩れは回避できます。

box-sizing: border-box; でデザイン崩れをあらかじめ防いでおこう

実は、余白paddingは何も設定せずに使うとデザイン崩れの原因になります。
余白を足した分だけ、どんどん横幅・高さが大きくなってしまうんです。

だから、先回りしてpaddingが原因のデザイン崩れがおきないようにするのがオススメ。

* {
  box-sizing: border-box;
}
藤ミヤチ
藤ミヤチ

たった1行でデザイン崩れがおきにくくなるから、box-sizingを追加しておこう!