CSSユニット

CSSには、長さを表すためのいくつかの異なる単位があります。

多くのCSSプロパティは、、、、など widthの「長さ」の値を取ります。marginpaddingfont-size

長さ10pxは、、などの長さの単位が後に続く数値です2em。

px（ピクセル）を使用して、さまざまな長さの値を設定します。

h1 {
font-size: 60px;
}

p {
font-size: 25px;
line-height: 50px;
}

注：番号と単位の間に空白を表示することはできません。ただし、値がの場合 0、単位は省略できます。

一部のCSSプロパティでは、負の長さが許可されます。

長さの単位には、絶対単位と相対単位の2種類があります。

絶対長さ

絶対長の単位は固定されており、これらのいずれかで表される長さは、正確にそのサイズとして表示されます。

画面サイズは大きく異なるため、絶対長単位を画面で使用することはお勧めしません。ただし、印刷レイアウトなど、出力メディアがわかっている場合は使用できます。

*ピクセル（px）は、表示デバイスを基準にしています。低dpiデバイスの場合、1pxはディスプレイの1デバイスピクセル（ドット）です。プリンターと高解像度画面の場合、1pxは複数のデバイスピクセルを意味します。

相対長さの単位は、別の長さプロパティを基準にした長さを指定します。相対的な長さの単位は、異なるレンダリングメディア間でより適切にスケーリングされます。

Unit	Description
em	Relative to the font-size of the element (2em means 2 times the size of the current font)
ex	Relative to the x-height of the current font (rarely used)
ch	Relative to the width of the "0" (zero)
rem	Relative to font-size of the root element
vw	Relative to 1% of the width of the viewport*
vh	Relative to 1% of the height of the viewport*
vmin	Relative to 1% of viewport's* smaller dimension
vmax	Relative to 1% of viewport's* larger dimension
%	Relative to the parent element

ヒント： emユニットとremユニットは、完全にスケーラブルなレイアウトを作成するのに実用的です。
*ビューポート=ブラウザのウィンドウサイズ。ビューポートの幅が50cmの場合、1vw = 0.5cmです。

表の数字は、長さの単位を完全にサポートする最初のブラウザバージョンを示しています。