CSSでは、font-sizeプロパティ, widthプロパティ, heightプロパティ, marginプロパティ, paddingプロパティなど、その要素に関する様々なサイズを指定する際には、「0」の場合を除き、必ず単位をともなう数値を使って指定します。使われる単位は「絶対単位」と「相対単位」の2種類に大別され、また一部のプロパティでは、パーセンテージ(%)を単位とするパーセンテージ値を指定することもできます。絶対単位とは物差しで測ることができる単位を指しますが、ディスプレイ上の設定においてはかなり不正確です。相対単位は、適用要素やユーザーのディスプレイの環境に依存します。詳細は以下の通りです。
"em" は、たとえば p要素に対して "16pt" のフォントサイズが指定されている場合は "16pt" が "1em" となるので、その p要素内にある span要素に "0.75em" のフォントサイズを指定すると、span要素のフォントサイズは、"12pt" と換算されます。このように font-size プロパティが、"em" の長さを定めるプロパティということになります。
"ex" は、小文字の大きさに合わせて調整したい場合に有用とされますが、指定されているフォントの種類により同じフォントサイズであっても異なったサイズで表示されたり、仕様書内においても問題が生じてるため使わない方が良いとされます。
"px" は、画像解像度に依り、たとえば Macintosh の 72dpi の解像度下では 72px で 1インチに、Windows の 96dpi の解像度下では 96px で 1インチとなります。このようにピクセル数は同じサイズのディスプレイでも解像度の設定によって大きさが異なるため相対単位とされています。しかし、ほとんどの視覚ブラウザ(Internet Explorer など)は、"px" を絶対的な単位の指定として解釈しているようです。
相対単位による指定は、別のサイズのプロパティに対して相対的なサイズを与え、異なる媒体でも調整されるのに対して、絶対単位による指定は、ブラウザによっては相対的な指定として解釈されたり、ディスプレイ上や印刷などの出力メディアに大きく依存するため、相対的な単位よりも使い難いものです。
パーセンテージ(%)は、他の値との相対的な値を実数値の後にパーセンテージ(%)をつけて指定します。 どの値を参照するか(基準値)は各プロパティによって異なります。
たとえば、font-sizeプロパティであれば、親要素の p要素に "p { font-size : 20px ; }" が指定されていて、p要素内にある子要素の strong要素に "p strong { font-size: 80% ; }" の指定がある場合、p要素内にある strong要素内のフォントサイズは親要素である p要素の "20px" を基準値として参照し、"16px" と換算されます。
CSS は、HTML と違って「0」を指定する場合を除き、必ず単位を伴って指定する必要があります。単位をつけなければ、ブラウザの標準準拠(standard)モードと後方互換(quirk)モードに依って、誤記と見なされ、その指定が無効とされたり、勝手に "px" をつけて拡大解釈することもあるので注意してください。また、単位を省略することはできませんが、絶対値が1未満の場合は、頭についている「0」を省いて記述することができます。たとえば、"0.5em" は ".5em" と書くことができます。
関連リンク:!DOCTYPE スイッチ
ユーザー(閲覧者)のユーザビリティ(usability)・アクセシビリティ(accessibility)の点からできることならサイト設計時には、文字サイズ等も含めて絶対単位の指定のみを想定したデザインではなく、ディスプレイの解像度によるウィンドウサイズに依存することのない可変的な「リキッドレイアウト」を採用することを考慮したいものです。たとえば文字サイズを指定する場合、Mac版・Win版を問はず Internet Explorer では、制作者側が絶対単位でフォントサイズを指定している場合、ユーザーはそのサイズから変更することができません(最新のWin版Internet Explorer 7 では改善)。これに対して Safari, Firefox, Opera などの視覚ブラウザの最新バージョンでは指定された文字の大きさが絶対単位の指定であろうが相対単位の指定であろうが関係なくユーザ側でフォントサイズを任意に調節することが可能です。
ユーザ側でフォントサイズを任意に調節できるブラウザで Internet Explorer での閲覧だけを想定しているような絶対単位で指定しているウェブページを閲覧すると多くの場合、フォントサイズを一段階大きくするだけで、positionプロパティで絶対配置を指定されている要素同士が重なったりして文字が読めなくなったり、内容がはみ出してデザインが大きく崩れてページの内容自体に何が書かれてあるのかがわからなくなるような困ったデザインを見かけます。そんなことにならないためにも、できることならリキッドレイアウトを想定して "em" や "%" といったユーザ側での調節に融通の利く単位を利用しましょう。