概要へ移動

このページで解説するコードの実行結果。

line-height: 2em;
「人の運命はわかりませんな」
「それはちがう。人の運命の九割は自分の不明による罪だ。 なににせよ、藤堂平助などは、いまとなっては道をひきかえすわけにはゆくまい」
～ 竜馬がゆく（司馬遼太郎 著）
line-height: 3em;
「人の運命はわかりませんな」
「それはちがう。人の運命の九割は自分の不明による罪だ。 なににせよ、藤堂平助などは、いまとなっては道をひきかえすわけにはゆくまい」
～ 竜馬がゆく（司馬遼太郎 著）
line-height: 3.5em;
「人の運命はわかりませんな」
「それはちがう。人の運命の九割は自分の不明による罪だ。 なににせよ、藤堂平助などは、いまとなっては道をひきかえすわけにはゆくまい」
～ 竜馬がゆく（司馬遼太郎 著）

なお、見た目のため、このページの実行結果には「下のCSSコードも」適用している。

CSS : デフォルトCSS
div {

    border:     2px  solid  blue;   /*  境界線  */

    padding:    0 1em;              /*  内側の余白  */

    min-width:  5em;                /*  最小幅  */

    max-width:  20em;               /*  最大幅  */

}

line-heightの概要

行の高さを設定する。<p>要素（段落）などで使うことが多い。

数値（＋ 単位）で指定する。デフォルト値はnormal。設定をデフォルトに戻したい場合、normalで上書きする。

まず、line-height の設定が無い例。

HTML : 適用するHTML
<div class="sample">

    「人の運命はわかりませんな」<br>

    「それはちがう。人の運命の九割は自分の不明による罪だ。

    なににせよ、藤堂平助などは、いまとなっては道をひきかえすわけにはゆくまい」<br>

    ～ 竜馬がゆく（司馬遼太郎 著）

</div>
実行結果
「人の運命はわかりませんな」
「それはちがう。人の運命の九割は自分の不明による罪だ。 なににせよ、藤堂平助などは、いまとなっては道をひきかえすわけにはゆくまい」
～ 竜馬がゆく（司馬遼太郎 著）

line-height を2emにする。

CSS : 2em
.sample  {

    line-height:    2em;

}
実行結果
「人の運命はわかりませんな」
「それはちがう。人の運命の九割は自分の不明による罪だ。 なににせよ、藤堂平助などは、いまとなっては道をひきかえすわけにはゆくまい」
～ 竜馬がゆく（司馬遼太郎 著）

line-height を3emに変更。

CSS : 3em
.sample  {

    line-height:    3em;

}
実行結果
「人の運命はわかりませんな」
「それはちがう。人の運命の九割は自分の不明による罪だ。 なににせよ、藤堂平助などは、いまとなっては道をひきかえすわけにはゆくまい」
～ 竜馬がゆく（司馬遼太郎 著）

細かく設定するなら小数にすればよい。

CSS : 3.5em
.sample  {

    line-height:    3.5em;

}
実行結果
「人の運命はわかりませんな」
「それはちがう。人の運命の九割は自分の不明による罪だ。 なににせよ、藤堂平助などは、いまとなっては道をひきかえすわけにはゆくまい」
～ 竜馬がゆく（司馬遼太郎 著）

Emmet : lh

記述Visual Studio Code
lhline-height: ;