CSSでは<Length>と表記される値は、マージンなどの間隔や長さを表すために用いられます。

　<Length>値のフォーマットは、「実数」の直後にpxやemのような「単位識別子」が続きます。実数部は小数部を含む場合と含まない場合があります。実数部がゼロの時、「単位識別子」は省略することができます。

「実数」「単位識別子」

　負の長さを使えるかどうかは個々の属性の仕様に依存します。負の値を使えない属性に負の長さの値が設定されている場合、その宣言は無視されます。

　設定した<Length>値がサポートされない範囲の値だった場合、ユーザー・エージェントはそれを適切な値に近似します。

　単位識別子の示す単位には、相対的単位に基づくものと絶対的単位に基づくものがあります。

　相対的単位値では、別の<Length>属性値対する相対値を指定しますので、ある出力環境から別の出力環境に容易に拡大縮小できます。

　次のスタイルシートは、emTestクラスの'font-size'を0.7emに設定します。つまり、emTestクラスのフォントサイズ（高さ）は、親要素のフォントの高さの0.7倍の大きさとなります。

.emTest	{ font-size: 0.7em; }

　これを次のようなHTMLで使ってみます。まず、親要素となるdivでフォントサイズを40pxに設定し、その下にemTestクラスのdiv要素を三つ入れ子にします。同様にemTestクラスのspan要素も三段の入れ子にします。

<div style="font-size:40px">div 40px
<div class="emTest">div 0.7em
<div class="emTest">div 0.7em
<div class="emTest">div 0.7em
</div>
</div>
</div>
<span class="emTest">span 0.7em
<span class="emTest">span 0.7em
<span class="emTest">span 0.7em
</span>
</span>
</span>
</div><!-- font size 40 -->

　上記のHTMLでは、親要素のフォントサイズがそれぞれのemTestクラスの要素のフォントサイズに反映されて、その結果ネストされる度にフォントサイズが縮小されます。

　上記のfont-sizeへのem値の適用は、親要素のフォントサイズの参照というどちらかと言えばem値の例外的な作用ですが、次はline-heightの例です。line-heightではem値は「その要素のフォントサイズに対する相対値」として作用します。次の例で、emTest2クラスは上記の例と同じようにフォントサイズを親要素の0.7倍で表示し、行の高さをその1.5倍に設定します。

.emTest2	{ font-size: 0.7em; line-height: 1.5em; }

　これを次のHTMLで使ってみます。

<div style="font-size:40px">
<div class="emTest2">div 0.7em line-height: 1.5em<br>div 0.7em line-height: 1.5em
<div class="emTest2">div 0.7em line-height: 1.5em<br>div 0.7em line-height: 1.5em
<div class="emTest2">div 0.7em line-height: 1.5em<br>div 0.7em line-height: 1.5em
</div>
</div>
</div>
</div><!-- font size 40 -->

　上記にスタイルシートとHTMLによって、次のようにdiv要素がネストされる度に縮小され、それに応じて行間も縮小されます。

　相対単位を使えば、もしHTML全体のフォントサイズを拡大、または縮小したい場合、親要素のフォントサイズを変更するだけで一括してその子孫のフォントサイズを変更することができます。例えば上記の1行目の親要素となるdivのフォントサイズを20pxに変更すると、次のように子孫の要素も自動的に縮小されます。

　このような効果が相対単位での指定の最大の利点となります。

　フォントによって、個々の文字のビット・パターンの高さは異なります。それ故に、ex値による指定は、フォントのデザイン（ビット・パターン、グリフ）も考慮した相対値と言えるかもしれません。

　次のスタイルシートは、emTest3クラスのfont-sizeを0.8exに設定します。

.emTest3	{ font-size: 0.8ex;}

　次のHTMLは上記のスタイルシートを使って、親要素で40pxに設定されたフォントサイズを縮小します。

　以下は上記のスタイルシートとHTMLの表示です。日本語フォントでは、おおむね同じように表示されていますが、serifやImpactではフォントサイズがかなり変わっています。

　絶対的単位値は、物理的な単位に基づいた値で主に出力環境が確定的な場合に用いられます。