ピクセルからem
親要素のフォントサイズを使ってpxをemに変換します。emは直近の親に相対で、ボタンのパディングをラベル文字に合わせてスケールさせたいときや、入れ子リストのインデントがローカル本文サイズに従うときに便利です。
pxからemへの変換方法
1. 親要素のフォントサイズをpxで特定します（例: 18 px）。
2. 変換するpx値を入力します（例: 9 pxのletter-spacing）。
3. em結果を読みます（9 ÷ 18 = 0.5 em）。
4. その親コンテキストにスコープした子要素のCSSに適用します。
pxからemの例
ボタンのパディング
親フォント16 px、縦パディング8 px → 0.5 em。大画面で親が18 pxになってもスケールします。
入れ子の見出し
セクションフォント20 px、サブ見出しのデザイン24 px → ルートではなくセクションに対して1.2 em。
アイコンの揃え
16 pxテキスト行にインラインアイコン14 px → 0.875 emのアイコンボックスがテキストメトリクスに揃います。
pxをemに変換するとき
• コンポーネント内部がローカルフォントサイズの変化に合わせてスケールすべきとき。
• 見出しがサイズの違うコンテナ内にあるリッチテキストをスタイルするとき。
• レガシーCSSがemを使い、新しいpxデザインを同じシステムに写すとき。
emの積み上がり落とし穴を避ける
各レベルで font-size: 0.9em の深く入れ子のメニューは、テキストを予想外に縮めます。構造レベルのfont-sizeにはremを好み、1つの親に結びついたローカルパディングにemを使います。デザイントークンに親の仮定を記録してください。
よくある質問
emとremの違いは何ですか？
emは親のフォントサイズを参照し、remはルート（html）のフォントサイズだけを参照します。
入れ子のemが積み上がるのはなぜですか？
各レベルが掛け算します: 1.2 emの親の中の1.2 em = 両方のfont-sizeチェーンが適用されるならルートの1.44倍。
式は？
em = px ÷ parentFontSizePx。常に直近の親の計算済みフォントサイズを使います。
emのパディングは？
はい——emのpadding/marginは要素自身のfont-sizeに合わせてスケールします（margin/paddingでは仕様が要素のフォントサイズを使います）。
emはいつ始まりましたか？
伝統的には活字の「大文字Mの幅」。今はCSSのfont-sizeに相対と定義されます。