em unit
親要素または要素自体のフォントサイズを基準とした相対的な長さ単位です。フォントサイズに比例したスペーシングやサイジングを実現し、テキストとの調和の取れたレイアウトを構築できます。フォントサイズに使用すると親要素からの継承値に対する倍率となり、その他のプロパティでは要素自身のフォントサイズが基準になります。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.types.length.em | 1 | 12 | 1 | 1 | 18 | 1 |
基本構文
CSS
.text {
font-size: 1.2em;
padding: 0.5em 1em;
margin-bottom: 1.5em;
border-radius: 0.25em;
}ライブデモ
実務での使いどころ
-
フォントサイズ連動のスペーシング
ボタンのパディングをem単位で指定し、フォントサイズを変更しても適切な余白比率を自動維持します。
注意点
- emの入れ子使用はフォントサイズの複合（compound）を引き起こし、意図しないサイズになる場合があります。remの使用も検討してください。
アクセシビリティ
- em単位はユーザーのフォントサイズ設定に追従するため、アクセシビリティに配慮した柔軟なレイアウトに適しています。