line-height CSS2.2

line-height は、テキストの行の高さを指定します。 フォントサイズよりも小さい数値を指定すると行間が無くなり行が重なって表示されます。

名前:line-height
値: normal | <number> | <length> | <percentage> | inherit
初期値:normal
適用対象:全ての要素
継承:する
パーセンテージ:要素自体のフォントサイズを参照
メディア:visual（視覚的）
計算値:<length>と<percentage>は絶対値。その他は指定通り。

Value（値）

normal
初期値 標準の行の高さ
<number>
フォントサイズに数値をかけた高さになる
<length>
数値＋単位で指定
<percentage>
フォントサイズに対する割合を指定（数値＋％）
inherit
親要素の値を継承する

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p.test1 { line-height: normal; }
   p.test2 { line-height: 2; }
   p.test3 { line-height: 4; }
   p.test4 { line-height: 3px; }
   p.test5 { line-height: 30px; }
   p.test6 { line-height: 150%; }
   p.test7 { line-height: 200%; }
  </style>
 </head>
 <body>
   <p class="test1">（文章）</p>
   <p class="test2">（文章）</p>
   <p class="test3">（文章）</p>
   <p class="test4">（文章）</p>
   <p class="test5">（文章）</p>
   <p class="test6">（文章）</p>
   <p class="test7">（文章）</p>
 </body>
</html>

display (line-height:normal;)

ABCDEFGHIJKLMNOPQRSTUVWXYZ あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん 安似宇衣於加機久計己左之寸世曽太知州天止奈仁奴祢乃波比不部保末美武女毛也由与良利留礼呂和為恵遠无毛

display (line-height:2;)

ABCDEFGHIJKLMNOPQRSTUVWXYZ あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん 安似宇衣於加機久計己左之寸世曽太知州天止奈仁奴祢乃波比不部保末美武女毛也由与良利留礼呂和為恵遠无毛

display (line-height:4;)

ABCDEFGHIJKLMNOPQRSTUVWXYZ あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん 安似宇衣於加機久計己左之寸世曽太知州天止奈仁奴祢乃波比不部保末美武女毛也由与良利留礼呂和為恵遠无毛

display (line-height:3px;)

ABCDEFGHIJKLMNOPQRSTUVWXYZ あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん 安似宇衣於加機久計己左之寸世曽太知州天止奈仁奴祢乃波比不部保末美武女毛也由与良利留礼呂和為恵遠无毛

display (line-height:30px;)

ABCDEFGHIJKLMNOPQRSTUVWXYZ あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん 安似宇衣於加機久計己左之寸世曽太知州天止奈仁奴祢乃波比不部保末美武女毛也由与良利留礼呂和為恵遠无毛

display (line-height:150%;)

ABCDEFGHIJKLMNOPQRSTUVWXYZ あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん 安似宇衣於加機久計己左之寸世曽太知州天止奈仁奴祢乃波比不部保末美武女毛也由与良利留礼呂和為恵遠无毛

display (line-height:200%;)

ABCDEFGHIJKLMNOPQRSTUVWXYZ あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん 安似宇衣於加機久計己左之寸世曽太知州天止奈仁奴祢乃波比不部保末美武女毛也由与良利留礼呂和為恵遠无毛

上に戻る