【CSS】行間を下だけ、上だけ調整する方法

行間を指定するにはline-heightを使います。

しかし、これでは1行目と最後の行である上と下の隙間がうまく調整できません。

「上下の行間をあけたい！」「上下の行間を詰めて0にしたい！」

行間を下だけ、上だけ調整する方法を解説します。

marginやpaddingを使う

line-heightは行間を指定するCSSです。

指定した数値分高さを確保し、その上下中央に文字を置きます。

しかし、line-height内で上寄せ、下寄せすることはできません。

よって、marginやpaddingで要素の上、下の隙間を調整することになります。

上か下の行間を増やす場合

行間を増やすにはpaddingを指定します。

上か下の行間を減らす場合

行間を減らす、0にするにはマイナスmarginを利用して詰めます。

<style>
.example{
    line-height: 2;
    border: 1px solid #999;
    background: #fff7cc;
}
.example p{
    /*コレ*/margin: -0.5em 0;
}
</style>
<div class="example"><p>テキストテキスト<br>テキストテキスト<br>テキストテキスト</p></div>

線は外側に設定します。

内側の要素でマイナスmarginを指定し、線に文字を近づけます。

line-heightを指定したとき、1行の上下の隙間は次のような式になります。

ややこしいですが、指定した数値が1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。

line-heightでできた上下の隙間をmarginで引いて0にするというわけです。

【まとめ】行間を下だけ、上だけ調整する方法

上か下に行間を増やすにはpaddingを指定します。

行間を減らす、0にするにはマイナスmarginで詰めます。

以上、行間を下だけ、上だけ調整する方法でした。