CSSで使用する 大きさ・長さ の単位まとめ

CSSを始めてみると，サイズ指定などの際，以下のように多くの候補が出てきて何を使用するのが良いか？分からなくなることがあると思います．

そこで，私なりにCSSでの単位についてまとめました．

CSSで多く使用する単位一覧

物理的な長さ

単位	説明	使用例
px	ピクセル単位。画面上のドット数を表す。	width: 200px;
cm	センチメートル。実際の長さを表す。	height: 10cm;
mm	ミリメートル。センチメートルの千分の一。	margin: 5mm;
in	インチ。1インチは2.54センチメートル。	font-size: 0.5in;
pt	ポイント。印刷業界で使用される単位。1ポイントは1/72インチ。	font-size: 12pt;
pc	パイカ。ポイントの12分の1。	margin: 1pc;

相対的な長さ

単位	説明	使用例
%	親要素に対する割合を表す。	width: 50%;
em	フォントサイズに対する相対的な長さ。	margin: 1em;
rem	ルート要素のフォントサイズに対する相対的な長さ。	font-size: 1.2rem;
vw	ビューポートの幅に対する割合。	width: 50vw;
vh	ビューポートの高さに対する割合。	height: 80vh;
ex	x-height (小文字文字の高さ) を基準とする相対的な長さ。	font-size: 2ex;