上下の余白は rem, em, px のどれが適しているか

今回は 余白、特に 上下 ですね。なので文字の大きさは無関係ではないにしろ、本題ではありません。

絶対単位と相対単位

例えば「1m」と言われたとき、その長さ(あるいは幅や高さ)はどこの国へ行ったとしても同じサイズです。日本では1m = 100cm、アメリカでは 1m = 50cm なんてことはありませんよね。こういう単独でも成り立つ単位のことを 絶対単位 (absolute units, あぶそるーと ゆにっつ) と言います。

一方、例えば「50%」と言われたとき、それは、何かの基準がありその長さ(あるいは幅や高さ)に対してその割合が50%だ、という意味ですから、単独で成り立つことはできません。必ず基準にする何かを必要とする、これらを 相対単位 (relative units, れらてぃぶ ゆにっつ) と言います。

web上でよく利用される単位の分類は以下の通り。

上下のmarginと的を絞った場合、赤枠で囲った単位以外はおよそ使うことはないかと思います。そして vh や vmax (or vmin) などかなりメジャーになっている単位もありますが、これらは使い方をひとつ間違えるとトンデモなことになるので今回は省きます。開発者の方は良く使いますよね。一般ブロガーさんが無理に使う必要はありません。

一応「px」についてですが、モニター解像度を参照するので厳密に言えば相対単位です。けれども実際の利用に於いてはモニターとpxの関係はリリースメーカーが上手いことやってくれますので、web開発者やエンドユーザーはほとんど意識することなく使えます。なので厳密には違いますが、「絶対単位」の方に含めました。

余白に px, em, rem を利用したそれぞれの違い

今回の主旨は 上下余白調整にどの単位使お？ なので、上下に注目して頂きたいわけですが、比較の際は左右余白があるとより明確になりますので左右にも指定して見ていこうと思います。緑色の部位はそれぞれの余白(margin)にあたる範囲です。

上から順に px, em, rem でmarginを指定した様子です。縦を見るより横を見たほうがわかりやすいかな、と思います(特に em と rem の違い)

親要素のフォントサイズを基準とする em

先の章、表の説明に 親要素, ルート要素 という2つのキーワードが出ています。まずはそのうちの「親要素」から。上の比較に利用したhtmlは以下のような感じです。

<div style="font-size: 13px; margin: 8xx;">文章</div>

<div style="font-size: 13px;">
  <div style="margin: 8xx;">文章</div>
</div>

簡単な比較なのでhtmlだと大体こんな感じ。緑色がテキストに対しての 親要素 です。8xx というmargin指定、xxは「不定」の意味で使っています。8px, 8em, 8rem のどれか、という意味ですね。サンプルhtmlなのでこういう処置を取っているだけです。

親要素を基準とするのは em です。そしてこれを踏まえて例えば以下のようなhtmlの場合
* ここからはスマホでの閲覧に耐えられないので左右marginは取り除きます

<div style="font-size: 13px;">
  <div style="margin: 8em 0;">文章</div>
</div>

<div style="font-size: 13px;">
  <div style="margin: 8em 0; font-size: 20px;">文章</div>
</div>

上の方はフォントサイズ指定が1箇所、そして下は2箇所あります。そしてそれぞれに div要素 は2つあります。通常、内側のdivから見て外側にあるdivが「親」となり、要素的に内divは「自身」にあたるのでhtmlの親子関係をしっかり把握している人の方が却って「？？？」となる場面かもしれませんね。なので、font-size というCSSプロパティは 継承する (子孫要素まで伝達される)という点を踏まえて、より近い継承内容を参照 とか 自身が継承しているサイズを基準 とかいう言い方の方が良いと思うんだよな (´・ω・｀)

ただこれは考えすぎちゃったときの例というか考えすぎて混乱しないための例であって、大きな視野で言えば「親要素の指定を基準」で合ってます。

ここまでで、em という単位は フォントサイズから大きな影響を受ける ことがわかります。じゃあ2つ目キーワード ルート要素 とはなんぞや。

ルート要素のフォントサイズを基準とする rem

ルート(root)とはご存知の通り「根っこ」のことですね。何かが派生する際の根の部分です。rem単位を採用しているテンプレートのhtmlの中に

html {
  height: 100%;
  margin: 0;
  font-size: 62.5%;
}

こんな感じの内容があるかと思います。その前に「説明文に対する説明」が必要かもしれません。「ルートとなる要素 (主にhtml要素)」とあります。htmlというのはソースコード全体も指しますが、ひとつの要素としての html要素 というのもあります。この場合はhtml全体ではなく局部のhtml要素のことなので区別してください。

で、この 62.5% の意味ですけれども、パーセントなので相対単位ですね。この際基準とするのは 一般的なブラウザのデフォルトフォントサイズである 16px です。16pxの62.5%がちょうど 10px というきりの良い数値になりますので、根っこの部分で「1remは10pxとします」という指定を行うわけです。こうするとなにせ計算が簡単。1.3rem なら 13px ですし、1rem なら 10px、20rem なら 200px といった具合です。

なら最初からpx使えば良いじゃない (∵`)
と言うなかれ。remの優れた特徴というのは 根っこの指定を変更することで葉の隅々にまで影響を及ぼすことができる ところにあります。例えばページ全体を見て「全体的にフォントを大きくしたい」と思ったとき、まずは記事部分のフォント指定を変更し、そしてサイドメニューのそれを変更し、フッターのそれを変更し… とかものすごく大変。そんなときは

html {
  font-size: 93.75%
}

といった感じで数値を上げればフォントサイズの継承特性によってほとんどの部位でフォントが大きくなります(別単位での局地的指定は対象外)
上の例では 1rem = 15px になります。

ということは裏を返せば 必ずしも 1rem = 10px とは限らない ということです。先に提示したサンプル、8rem余白をルートフォントサイズを15px換算に変更して比較してみます。

別の目的で何かをして、意識していなかったところまで変わってしまうとあればそれは「意図しない結果」ですよね。

まとめ

個人的には「絶対にルートのフォントサイズを変更しないんだ！」と言い切れる方以外は rem単位によるmargin指定はおすすめしません
変更できないルート、というのは結局はremの良い部分を殺してしまうことでもありますし、まだ訪れない将来について今「絶対！」と決めてしまう必要などどこにもないですよね (´・ω・｀)

整然と一定の余白を保ちたいならば px を、前後のフォントサイズのバランスを見て設定したいならば em をおすすめします ('0')/