Since: 23rd/May/2002; Last Modified: 25th/May/2002
段落の一行の高さを、フォントの１．５倍、address 要素を１倍に指定します：
body { background: url("./rindou5.gif") navy;
color: #ccf }
h1 { font-style: italic;
font-weight: normal;
font-size: 3em }
p { background : #ccf;
color: navy;
font-weight: bold;
line-height: 1.5 }
address { font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: 0.9em;
line-height: 1 }
ango.css を上のように編集／保存して、 yonagahime.html をブラウザで開くと、p 要素の行の高さが文字の高さの１．５倍、 address 要素が１倍に表現されていることが確認できます。段落の行間が、文字の高さの０．５倍とられることになります。
ブラウザの設定で標準の文字の大きさを変化させれば、それに応じて p 要素の行の高さはその１．５倍、address 要素は１倍に変更されることが確認できます。
normal | ブラウザの標準の値 |
| 数字 | そこでのフォントの大きさを 1 とした倍数 |
<length> | 相対単位と絶対単位。但し、em 単位はそこで指定されているフォントの大きさを１とする。ex 単位はそこで指定されているフォントの小文字の x の高さを１とする。 |
% 単位 | そこで使われているフォントの大きさに対する比率 |
inherit | 親要素での指定を継承 |
次の例は、 p 要素の行の高さをフォントの１．３倍に指定しています。
p { line-height: 130% }
次のように書いたのと同じです。
p { line-height: 1.3 }