CSS - <length>

下記の様に、「数値＋単位」の形式で長さを指定します。数値は小数でも構いません。

.sample1 { width:300px; height:60px; }
.sample2 { width:3.5em; height:2.7em; }

下記の単位が定義されています。Webでよく使用されるのは em と px です。

単位	定義	種別	説明
em	CSS1	相対的	要素のフォントサイズ。文字 'M' の横幅が語源。
ex	CSS1	相対的	文字 'x' の高さ(x-height)。
ch	CSS3	相対的	文字 '0' の横幅。
rem	CSS3	相対的	ルート要素のフォントサイズ(root em)。
vw	CSS3	相対的	表示領域の横幅(viewport's width)。
vh	CSS3	相対的	表示領域の高さ(viewport's height)。
vmin	CSS3	相対的	表示領域の横幅と高さの小さな方(viewport's mininum length)
cm	CSS1	絶対的	センチメートル(1cm=10mm)。
mm	CSS1	絶対的	ミリメートル(10mm=1cm)
in	CSS1	絶対的	インチ(1in=2.54cm)
px	CSS1	絶対的	ピクセル(1px=1/96in)
pt	CSS1	絶対的	ポイント(1pt=1/72in)
pc	CSS1	絶対的	パイカ(1pc=12pt)

相対的長さは環境によって変動する長さです。絶対的長さは環境に依存しない長さですが、絶対的長さを正しく実現するには、ディスプレイやプリンタなどの特性を考慮する必要があります。px は CSS1 では相対的長さに分類されていましたが、CSS2.1 からは絶対的長さに分類されました。

単位の省略は許されませんが、数値が 0 の場合のみ、単位を省略することができます。

.sample3 { margin: 0  1em  0  2em; }

スタイルシート

.sample {
    color: black;
    background-image: url(../image/back.gif);
    width: 100px;
    height: 100px;
    border: 1px solid gray;
}

HTML

<div class="sample">こんにちわ</div>

表示

こんにちわ