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

2019.03.29  /  2019.06.16 HTML・CSS
CSSでデザインが崩れた!余白paddingが原因のデザイン崩れは、簡単に解決できる

CSSを書いていると

困っている受講生
あれ、デザイン崩れた…なんでや…

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

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

* { box-sizing: border-box; }

↑のCSSを追加するだけで、余白がからんだデザイン崩れが起きないようにコントロールすることができるようになりますよ。

藤ミヤチ藤ミヤチ
簡単に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; /* わかりやすいように線を引く */
}
横幅200pxの箱が3つ縦に並んでいる

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

ここで、最後の箱にだけ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;
}
横幅200pxの箱が3つ縦に並んでいるが、最後の1つだけ大きくなっている

・・・ん?

わからない受講生
横幅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です。
さきほど、勝手に横幅が大きくなっていたところも解決します。

横幅200pxの箱が3つ縦に並んでいる

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

指 ここがポイント
ボックスのサイズ計算方法はbox-sizingで制御する

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

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

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

* {
  box-sizing: border-box;
}
藤ミヤチ藤ミヤチ
これだけでデザイン崩れがおきにくくなるから、box-sizingを追加しておこう!
スキルアップしたいサイト制作者
向けの情報をつぶやくよ 藤ミヤチのTwitter
(ここをクリック/タップ)



LINE@で特別レクチャーなどの情報を発信中!
友だち追加

シェア


この記事も参考になるかも
SEO対策のためのmetaタグはこう書く!効果のある記述方法を丁寧に解説
コーディング初心者がやりがちなミスまとめ(HTML, CSS, JavaScript/jQuery対応)
【上級コーダーになるために】CSSが適用されるときのクセを知っておく!CSSの詳細度とは