ホーム(記事一覧)へ

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

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

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

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

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

marginやpaddingを使う

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

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

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

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

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

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


padding指定なし

テキストテキスト
テキストテキスト
テキストテキスト

上だけ
padding-top:1emを指定

テキストテキスト
テキストテキスト
テキストテキスト

上下
padding:1em 0を指定

テキストテキスト
テキストテキスト
テキストテキスト

下だけ
padding-bottom:1emを指定

テキストテキスト
テキストテキスト
テキストテキスト

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

行間を減らす、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)÷2}×文字サイズ

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

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


margin指定なし

テキストテキスト
テキストテキスト
テキストテキスト

上だけ
margin-top: -0.5emを指定

テキストテキスト
テキストテキスト
テキストテキスト

上下
margin: -0.5em 0を指定

テキストテキスト
テキストテキスト
テキストテキスト

下だけ
margin-bottom: -0.5emを指定

テキストテキスト
テキストテキスト
テキストテキスト

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

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

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

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

関連記事