スポンサード リンク
line-heightプロパティ (ラインハイト)
行の高さを指定プロパティです使い方(書式)
セレクタ { line-height : 値; }
プロパティ
対応ブラウザ | |
適用できる要素 | 全てのhtml要素 |
子要素へのスタイルの継承 | する |
プロパティの値 | 説明 |
単位 | px、emなどの単位 |
% | パーセンテージ |
倍数 | 倍数で指定。1.2は120%と同じ意味です。書くのが簡単なので一番使うのがこれ |
normal | 通常の行の高さ |
実際の指定方法
.hoge { line-height: 18px; } /* pxで指定 */
.hoge2 { line-height: 1.6; } /* 倍数で指定 */
.hoge3 { line-height: 160%; } /* %で指定、倍数1.6と同じ */
.hoge4 { line-height: normal; } /* 通常の行の高さ */
html部分
<p class="hoge">1行目<br>2行目 行の高さを18pxに指定</p> <p class="hoge2">1行目<br>2行目 倍数1.6に指定</p> <p class="hoge3">1行目<br>2行目 160%に指定、倍数1.6と同じ </p> <p class="hoge4">1行目<br>2行目 通常の行の高さ</p>
実際の表示
1行目
2行目 行の高さを18pxに指定
1行目
2行目 倍数1.6に指定
1行目
2行目 160%に指定、倍数1.6と同じ
1行目
2行目 通常の行の高さ