CSSの単位emとは？意味･正しい使い方、フォントサイズを基準に余白や幅も変化する仕組みを解説

CSS でレイアウトを組む際、よく目にする「em（エム）」という単位。「フォントサイズを指定するときに使う単位」というイメージを持っている方も多いかもしれませんが、実はそれだけではありません。

em は、フォントサイズだけでなく、margin や padding などの余白、さらには要素の幅（width）や角丸（border-radius）にも活用できる、汎用性の高い相対単位です。

しかし、その仕組みを正しく理解していないと、「意図しないサイズになってデザインが崩れてしまった……」と悩む原因にもなりかねません。

ここでは、CSS の「em」とはどのような単位なのか、その基本的な意味や語源に加え、なぜフォントサイズを基準に余白や幅まで変化するのかという仕組みを、具体的なコード例を交えながらわかりやすく解説します。

「emを実務でどう使いこなせばいいのか分からない」「文字サイズに合わせてボックス全体をバランスよく伸縮させたい」という方は、ぜひ最後まで読んでください。

CSSの単位emとは？

emとはフォントサイズを基準に長さが決まる相対単位

CSS でサイズを指定する際、px（ピクセル）のように数値が固定される単位を絶対単位、何かを基準としてサイズが変化する単位を相対単位と呼びます。

その代表的な相対単位が「em（エム）」です。
em は、基準となるフォントサイズを1として、その倍率で大きさを指定する単位です。

例えば、親要素のフォントサイズが 16px の場合、1em は 16px、2em は 32px になります。

font-size に em を指定した場合は、親要素のフォントサイズが基準になります。そのため、まずは基準となるフォントサイズがどこで設定されているかを理解することが重要です。

WordPress などの CMS では、テーマ側の CSS で body やコンテンツエリアなどにフォントサイズが設定されていることが一般的です。また、HTML と CSS で Webサイト を制作する場合は、外部 CSSファイル や styleタグ 内で body や親要素に font-size を指定します。

例えば、以下のように body のフォントサイズを 16px に設定した場合を見てみます。

body {
  font-size: 16px;
}

p {
  font-size: 2em;
}

この場合、p要素 のフォントサイズは、親要素である body の 16px を基準に計算されます。

このように em は、固定された数値ではなく、基準となるフォントサイズに対する倍率でサイズを決める相対単位です。

font-size以外にも！余白や幅、角丸など さまざまなCSSプロパティで使える相対単位

「文字サイズを表す単位だから、font-size にしか使えないのでは？」と思われがちですが、それは誤解です。

em は、フォントサイズを基準に大きさを計算する長さの相対単位であり、CSS でサイズを指定するさまざまなプロパティに利用できます。
代表的な使用例は以下の通りです。

このように、emは文字サイズだけでなく、文字とのバランスを保ちながら調整したいサイズ指定に適しています。

例えば、ボタンを作成する場合は、以下のように指定できます。

.button {
  font-size: 16px;
  padding: 0.75em 1.5em;
  width: 12em;
  border-radius: 0.5em;
}

この場合、font-sizeが16pxであれば、
・padding:0.75em → 12px
・padding:1.5em → 24px
・width:12em → 192px
・border-radius:0.5em → 8px
のように、すべてフォントサイズを基準に計算されます。
そのため、ボタンの文字サイズを変更した場合でも、余白・幅・角丸が同じ比率で変化し、デザイン全体のバランスを保ちやすくなります。

ただし、em は指定するプロパティによって基準となるフォントサイズが異なります。
・font-sizeに指定した場合 → 親要素のフォントサイズを基準に計算
・paddingやmargin、widthなどに指定した場合 → その要素自身のフォントサイズを基準に計算

この違いを理解することが、em を正く使ううえで重要です。

フォントサイズを基準に余白や幅も変化する仕組み

なぜ文字サイズと連動して余白や幅が変わるのか？

em の最大の特徴は、文字サイズを変更すると、それに合わせて余白（padding・margin）や要素の幅（width）なども連動して変化することです。

なぜこのような動きになるのか。
その理由は、CSS では em を使用した値を計算する際に、「1em＝基準となるフォントサイズ」として自動的に計算しているためです。

例えば、基準となるフォントサイズが 20px の場合、
・1em → 20px
・2em → 40px
・0.5em → 10px
のように、フォントサイズを基準とした倍率で最終的な px の値が決定されます。

ただし、ここで重要なのが、em の基準となるフォントサイズは、指定するプロパティによって異なるという点です。

この違いを理解すると、「なぜ文字サイズを変更すると余白や幅まで変化するのか」が分かります。

padding・widthなどは要素自身のフォントサイズが基準になる

まずは、padding や width で em を使用した場合の計算方法を見てみます。

.card {
  font-size: 20px;
  padding: 1em;
  width: 20em;
}

この場合、.card 自身のフォントサイズは 20px です。
そのため、ブラウザ内部では以下のように計算されます。

つまり、要素自身のフォントサイズが 20px に決まると、その要素内で指定された em は「20pxを1em」として計算されます。
この仕組みによって、フォントサイズを変更すると、同じ要素内に設定した余白や幅も自動的に再計算されます。

font-sizeでは親要素のフォントサイズが基準になる

一方、font-size に em を指定する場合は、基準が異なります。

font-size は、その要素自身の文字サイズを決めるプロパティです。
そのため、まだ自身のフォントサイズが決まっていない段階では、基準となるサイズが存在しません。

そこで CSS では、一つ外側にある親要素のフォントサイズを基準にして計算する仕組みになっています。

例えば、以下のような HTML と CSS を見てみます。

<body>
  <p class="text">文章が入ります</p>
</body>

body {
  font-size: 16px;
}

.text {
  font-size: 2em;
}

この場合、サイズが決定する流れは以下のようになります。

つまり、p要素 の font-size:2em は、親要素である body の 16px を基準に計算され、最終的に 32px で表示されます。

ボタンを例に見るemによるサイズ連動

em のメリットが分かりやすいのが、ボタンやバッジなどの UIパーツ です。

例えば、以下のようなボタンを作成したとします。
HTML

<button class="btn-14">送信する</button>

CSS

.btn-14 {
  font-size: 14px;
  padding: 0.5em 1.5em;
  width: 10em;
  border-radius: 0.5em;
}

ブラウザでの表示
送信する

この場合、.btn要素 のフォントサイズは 14px なので、ブラウザはそれを基準に各プロパティを計算します。

つまり、このボタンは「14px」というフォントサイズを基準に、余白・幅・角丸の大きさが決まっています。
では、このボタンを目立たせるために、文字サイズだけを 28px へ変更してみます。
CSS

.btn-28 {
  font-size: 28px;
  padding: 0.5em 1.5em;
  width: 10em;
  border-radius: 0.5em;
}

HTML

<button class="btn-28">送信する</button>

すると、フォントサイズが 28px になったことで、em を使用しているプロパティも自動的に再計算されます。
ブラウザでの表示
送信する

このように、文字サイズだけを変更しても、余白・幅・角丸まで同じ比率で拡大されるため、ボタン全体のバランスが崩れません。
もし余白や幅、角丸をすべて px で固定していた場合、文字だけが大きくなって窮屈に見えたり、角丸だけが小さく見えたりすることがあります。

一方、em を使用すれば、フォントサイズを基準として各サイズが連動するため、デザイン全体の比率を保ったままコンポーネントを拡大・縮小できます。

これが、ボタンやカード、バッジなどの UIパーツ で em がよく利用される理由です。

emを使うことでデザインが崩れにくくなる理由

文字サイズが変わっても余白との比率を保てる

em を使用する大きなメリットは、文字サイズを基準に余白や幅なども連動するため、デザイン全体の比率を保ちやすいことです。

例えば、Webサイトでよく使われる以下のようなコンポーネントを、すべて px で固定して作成したとします。
・ボタン
・バッジ（「NEW」や「SALE」など）
・タグ
・ラベル

この状態で文字サイズだけを大きくすると、文字がボタンやバッジの枠からはみ出したり、余白とのバランスが悪くなって窮屈な印象になったりすることがあります。

一方、余白や幅を em で指定しておけば、文字サイズの変更に合わせて各サイズも自動的に再計算されます。
そのため、文字と余白の比率が維持され、デザイン全体のバランスを保ちやすくなります。

コンポーネント全体を拡大・縮小しやすい

em を使うと、ボタンやバッジなどのコンポーネントを、内部の比率を保ったまま拡大・縮小しやすくなります。

例えば、以下のようなボタンを作成します。
HTML

<button class="btn-co">購入する</button>
<button class="btn-co btn-large">購入する</button>

CSS

.btn-co {
    font-size: 14px;
    margin: 1em;
    padding: 0.5em 1em;
    width: 10em;
    border-radius: 0.5em;
    background: #333;
    color: #fff;
    border: none;
}

.btn-large {
    font-size: 24px;
}

ブラウザでの表示
購入する
購入する

通常サイズのボタンでは、フォントサイズが 14px なので、
・margin:1em → 14px
・padding:0.5em → 7px
・padding:1em → 14px
・width:10em → 140px
・border-radius:0.5em → 7px
として計算されます。

一方、大きなボタンでは font-size だけを 24px に変更しています。

すると、
・margin:1em → 24px
・padding:0.5em → 12px
・padding:1em → 24px
・width:10em → 240px
・border-radius:0.5em → 12px
へ自動的に変化します。

つまり、変更したのは文字サイズだけですが、

という動きになります。

実際の画面では、通常サイズのボタンと大サイズのボタンを並べると、文字だけでなく余白や角丸も同じ割合で変化していることが確認できます。

もしこれらをすべてpxで指定していた場合、大きなボタンを作るたびに、
・文字サイズ
・上下左右の余白
・横幅
・角丸
をそれぞれ調整する必要があります。

em を利用すれば、コンポーネントの基準となる font-size を変更するだけで、内部のサイズが連動します。
そのため、サイズ違いのボタンやカードを効率よく作成でき、デザインの一貫性も保ちやすくなります。

ブラウザの文字サイズ変更やレスポンシブにも対応しやすい

em は、ユーザーが文字サイズを変更した場合でも、文字と周囲の余白やサイズのバランスを保ちやすいというメリットがあります。

Webブラウザ には、ユーザーが読みやすさを調整するために文字サイズを拡大する機能があります。
また、スマートフォンやタブレットでは、OS側 の設定で文字を大きく表示している場合もあります。

このとき、余白やボタンサイズをすべて px で固定していると、

といった問題が発生することがあります。

一方、padding や border-radius などを em で指定しておけば、文字サイズの変更に合わせて、それらの値も自動的に再計算されます。

そのため、ボタンやバッジなどのコンポーネントでは、文字サイズが変化しても余白や角丸との比率を維持しやすく、さまざまな閲覧環境で使いやすいデザインを保てます。

ただし、em は画面幅そのものに合わせて要素を縮小する単位ではありません。

例えば、スマートフォンで文字サイズを大きくした場合、em で指定したボタンやカードも同じように拡大するため、画面幅によっては横幅が足りず、要素がはみ出す可能性があります。

そのため、レスポンシブデザインでは、em によるサイズ連動に加えて、
・max-widthで最大サイズを制限する
・flexやgridでレイアウトを調整する
・メディアクエリで画面幅ごとにサイズを変更する
といった方法を組み合わせることが重要です。

em は「どの画面サイズでも自動的に収まる単位」ではなく、フォントサイズを基準にコンポーネント内部のバランスを維持しやすくする単位として活用すると、そのメリットを最大限に発揮できます。

＞＞CSSの相対単位emで作る崩れにくいデザイン設計｜サイズ連動の仕組みとメリット･注意点を解説