CSS | line-height | 行の高さ

line-heightプロパティを使って、行の高さを指定できます。

.sampleクラスを持つ<p>要素を作ります。

HTML


<p class="sample">
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Assumenda autem vero quos eveniet eum provident nulla!
</p>

CSS


p {
    border:       solid tomato; /* 境界線 */
    border-width: 0 4px;        /* 境界線の幅 */
    color:        #810;         /* 文字の色 */
    font-size:    large;        /* 文字の大きさ */
    max-width:    20rem;        /* 幅 */
    padding:      3px;          /* 内側の余白 */
}

実行結果初期状態

Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda autem vero quos eveniet eum provident nulla!

line-height: 3remに設定すると行間が広がります。

HTML


<p class="sample">
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Assumenda autem vero quos eveniet eum provident nulla!
</p>

CSS


p {
    border:       solid tomato; /* 境界線 */
    border-width: 0 4px;        /* 境界線の幅 */
    color:        #810;         /* 文字の色 */
    font-size:    large;        /* 文字の大きさ */
    max-width:    20rem;        /* 幅 */
    padding:      3px;          /* 内側の余白 */
}

CSS


.sample {
    line-height: 3rem;
}

実行結果3rem

Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda autem vero quos eveniet eum provident nulla!

line-height: 5remにすると、さらに広がります。

HTML


<p class="sample">
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Assumenda autem vero quos eveniet eum provident nulla!
</p>

CSS


p {
    border:       solid tomato; /* 境界線 */
    border-width: 0 4px;        /* 境界線の幅 */
    color:        #810;         /* 文字の色 */
    font-size:    large;        /* 文字の大きさ */
    max-width:    20rem;        /* 幅 */
    padding:      3px;          /* 内側の余白 */
}

CSS


.sample {
    line-height: 5rem;
}

実行結果5rem

Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda autem vero quos eveniet eum provident nulla!

0.5rem(小さい値)にすると狭くなり重なります。

HTML


<p class="sample">
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Assumenda autem vero quos eveniet eum provident nulla!
</p>

CSS


p {
    border:       solid tomato; /* 境界線 */
    border-width: 0 4px;        /* 境界線の幅 */
    color:        #810;         /* 文字の色 */
    font-size:    large;        /* 文字の大きさ */
    max-width:    20rem;        /* 幅 */
    padding:      3px;          /* 内側の余白 */
}

CSS


.sample {
    line-height: 0.5rem;
}

実行結果0.5rem

Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda autem vero quos eveniet eum provident nulla!

デフォルト値はnormalです。

HTML


<p class="sample">
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Assumenda autem vero quos eveniet eum provident nulla!
</p>

CSS


p {
    border:       solid tomato; /* 境界線 */
    border-width: 0 4px;        /* 境界線の幅 */
    color:        #810;         /* 文字の色 */
    font-size:    large;        /* 文字の大きさ */
    max-width:    20rem;        /* 幅 */
    padding:      3px;          /* 内側の余白 */
}

CSS


.sample {
    line-height: normal;
}

実行結果normal

Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda autem vero quos eveniet eum provident nulla!