CSSでフォントサイズを指定するとき、rem単位とem単位はそれぞれ何を基準に計算されますか？

解説

正解は「rem はルート要素の font-size、em は親要素の font-size を基準にします」です。どちらも「何かのフォントサイズ」を基準にする相対単位（他の値との比率でサイズが決まる単位）ですが、基準として見に行く相手が違います。rem は常にルート要素を見ますrem は root em の略で、基準は必ず <html> 要素の font-size です。どれだけ深くネストしても基準が変わらないため、値が予測しやすいのが利点です。em は文脈で基準が変わりますem は「その要素に効いている font-size」が基準です。ただし font-size プロパティ自身に使う場合は自分のサイズがまだ決まっていないため、親要素の font-size が基準になります。padding や width に使う場合は、確定した自分自身の font-size が基準です。html { font-size: 16px; } .parent { font-size: 20px; } .child { font-size: 1.5em; /* 親の20pxが基準 → 30px */ padding: 1em; /* 自分の30pxが基準 → 30px */ margin: 1.5rem; /* htmlの16pxが基準 → 24px */ }em は入れ子にすると掛け算で膨らみますfont-size: 1.2em を持つ要素を3階層入れ子にすると、1.2 × 1.2 × 1.2 で約1.73倍になります。リストやカードなど再帰的に入れ子になりうる部品では、意図せず文字が肥大化しがちです。全体のスケールは rem で揃え、ボタンの余白のように「文字サイズに追随してほしい」値だけ em にすると破綻しにくくなります。html に px を直接書くとユーザーの文字サイズ設定が無視されます「rem はブラウザ既定の 16px に固定された絶対単位で、em だけが相対単位です」は誤りです。16px はあくまで初期値で、ユーザーがブラウザの文字サイズ設定を大きくすれば rem の基準も追随します。ここで html { font-size: 16px; } と固定するとその追随を殺してしまうため、アクセシビリティの観点では指定しないか 100% を使うのが無難です。「rem は親要素の font-size、em はルート要素の font-size を基準にします」は rem と em の役割が逆です。「rem はビューポートの幅、em は親要素の font-size を基準にします」のビューポート幅基準は vw の説明です。参考<length> - CSS: カスケーディングスタイルシート | MDNfont-size - CSS: カスケーディングスタイルシート | MDN