Subscribed unsubscribe Subscribe Subscribe

Kazuma Labolatory's

Nothing is Impossible. ✿




em --- 流動的

rem --- 準・流動的

px --- 固定的




CSS Values and Units Module / Level 3 - W3C

W3C CR*1 / 2016.09.29

5.1.1. Font-relative lengths: the em, ex, ch, rem units

Aside from rem (which refers to the font-size of the root element), the font-relative lengths refer to the font metrics of the element on which they are used. The exception is when they occur in the value of the font-size property itself, in which case they refer to the computed font metrics of the parent element (or the computed font metrics corresponding to the initial values of the font property, if the element has no parent).

em unit
Equal to the computed value of the font-size property of the element on which it is used.
The rule:

h1 { line-height: 1.2em }

means that the line height of h1 elements will be 20% greater than the font size of h1 element. On the other hand:

h1 { font-size: 1.2em }

means that the font size of h1 elements will be 20% greater than the computed font size inherited by h1 elements.




- html要素font-sizeプロパティに対する比率。指定のない場合はブラウザ標準の16px。

- remは、remを使う要素・プロパティに関係なく常に16pxが基準 (html要素のfont-sizeプロパティを変えない限り)。一方、emは、「使うプロパティ」によって基準元が変わる



( i )font-sizeプロパティに使った場合

親要素のfont-sizeに対する比率 /


.parent {
    font-size: 16px;
.sample {
    font-size: 3em;
<div class="parent">
   <div class="sample">



➜ .sampleの親要素.parentのfont-sizeの3倍 ➜ 16px × 3 = 48px 




( ii )それ以外のプロパティに使った場合



.sample {
   font-size: 16px;
   margin-top: 3em;


.sampleのfont-size:16px; の3倍のmargin-top幅 ➜ 16px × 3 = 48px



デモ - em, rem 比較

( i )font-sizeプロパティに使った場合

16px × 3rem = 48px ( 16px はhtmlのフォントサイズ。指定なし( デフォルト) → 16px

JS Bin on


25px × 3em = 75px

JS Bin on


( ii )それ以外のプロパティに使った場合

JS Bin on


JS Bin on


*1:W3Cの"Specification 進捗段階 / まとめ表 " はコチラのページ最下部 ➜ ---

This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Thanks!
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️