line-height
解説
行の高さを指定する際に使用します(マイナス値は指定不可)。正確には行のベースラインから次の行のベースラインまでの距離となります。行の高さとフォントサイズの指定方法により、行が重なって表示されるので注意が必要となります。
プロパティ情報
値: | 長さ、パーセンテージ、数値、normal |
---|---|
初期値: | normal |
適用対象: | 全ての要素 |
継承: | する |
パーセンテージ: | 要素自信の文字の高さ |
適用メディア: | 視覚 |
レベル: | 1〜2 |
参照
text-align text-decoration text-underline-position text-indent text-autospace text-transform text-justify line-height line-break word-spacing word-break word-wrap vertical-align letter-spacing white-space
使用例
ソース
CSSの記述方法はスタイルシートってなに?も参照下さい。 div.sample1 {line-height: normal;} div.sample2 {line-height: 12px;} div.sample3 {line-height: 2;} div.sample4 {line-height: 120%;}
HTMLの記述方法 <div class="sample1"><p>サンプル1行目<br>サンプル2行目</p></div> <div class="sample2"><p>サンプル1行目<br>サンプル2行目</p></div> <div class="sample3"><p>サンプル1行目<br>サンプル2行目</p></div> <div class="sample4"><p>サンプル1行目<br>サンプル2行目</p></div>
表示結果
サンプル1行目
サンプル2行目
サンプル1行目
サンプル2行目
サンプル1行目
サンプル2行目
サンプル1行目
サンプル2行目