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

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-height2emにする。

CSS : 2em
.sample  {
    line-height:    2em;
}
実行結果
「人の運命はわかりませんな」
「それはちがう。人の運命の九割は自分の不明による罪だ。 なににせよ、藤堂平助などは、いまとなっては道をひきかえすわけにはゆくまい」
~ 竜馬がゆく(司馬遼太郎 著)

line-height3emに変更。

CSS : 3em
.sample  {
    line-height:    3em;
}
実行結果
「人の運命はわかりませんな」
「それはちがう。人の運命の九割は自分の不明による罪だ。 なににせよ、藤堂平助などは、いまとなっては道をひきかえすわけにはゆくまい」
~ 竜馬がゆく(司馬遼太郎 著)

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

CSS : 3.5em
.sample  {
    line-height:    3.5em;
}
実行結果
「人の運命はわかりませんな」
「それはちがう。人の運命の九割は自分の不明による罪だ。 なににせよ、藤堂平助などは、いまとなっては道をひきかえすわけにはゆくまい」
~ 竜馬がゆく(司馬遼太郎 著)

Emmet : lh

記述Visual Studio Code
lhline-height: ;