レスポンシブウェブデザインのサイトを作る時は、色々な値をpxではなく%で指定することになります。今回は、そんな時にハマりやすい上下のpaddingとmarginの%指定に関するお話です。

heightとは挙動が異なる点に注意

heightの%指定は親要素の高さを基準にして計算されるんでした（詳しくはこちら↓）

cssでheightに100%を指定しても高さが画面いっぱいにならない問題 - diwao日記

このことを踏まえれば、順当に考えてpaddingやmarginも同じような動きをするだろう、と考えるのが自然な流れだと思います。

<div class="parent">
  <div class="child">child</div>
</div>

.parent {
  background-color: gold;
  height: 300px;
  width: 400px;
}

.child {
  background-color: tomato;
  margin-bottom: 50%;
  width: 50px;
}

具体例を出すと、上記のスタイルであれば、この時の.childのmargin-bottomは.parentのheightである300px * 0.5 = 150pxになるような気がします。

しかし、Chromeのデベロッパーツールで見てみると、この時の.childのmargin-bottomは200pxとなります。

デベロッパーツールで見たmargin-bottomの値

デモはこちら↓

See the Pen margin-bottomの%指定デモ by diwao (@diwao) on CodePen.

これ最初は「あれっ？」と思うのではないでしょうか。

heightは関係ない

先ほどのスタイルでなぜmargin-bottomが200pxになったのか、その答えをズバリ言ってしまうと、.childのmargin-bottomは.parentのheightではなくwidthを基準に計算されたからです。

heightとは違い、上下のmarginとpaddingは親要素の横幅を基準に計算が行われます。先ほどの例だと親要素のwidthが400pxだったので、.childのmargin-bottom:50%;は、400px * 0.5 = 200pxと計算されたということです。

横幅基準の方が便利

はじめて知った時は私も不思議な仕様だなと思ったのですが、そういうものだとわかってしまえばすごく逆に使い勝手いいんですよね。

レスポンシブウェブデザインに期待する一般的な動きって、横幅が狭まったときには画像も小さくなって、コンテンツが全体的にキュッとコンパクトになっていく形だと思います。つまり考慮するべき変化って基本的には画面の横幅なんですよ。ブレイクポイントもwidthで設定するのが一般的ですし。

marginとpaddingが幅に応じて可変するということは、つまり幅が広くなればその分上下の空きも大きく、逆に狭くなれば小さくなるってこと。この仕様の方が全体のバランスを崩さず、自然なレイアウトを実現しやすい。作る側にとって都合がいいからこうなってるのかなと思いましたが、実際のところはどうなんでしょうか。

参考