ホームへ

【CSS】line-heightが効かない原因と解決方法4選

line-heightは行間を調整するCSSです。

「line-heightを指定したのに行間が変わらない!?」

line-heightが効かない原因と解決方法を4つ紹介します。

【原因1】インライン要素に効かないことがある

line-heightは子孫要素に継承します。

親要素(先祖要素)のline-heightが子孫要素のspanのline-heightより数値が大きいとspanのline-heightが効きません。

効かない例(親>子)

<style>
.example{
    line-height: 3;
    border: 1px solid #333;
}
.example>span{
    /*効かない*/line-height: 1;
}
</style>
    
<div class="example">
    <span>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト</span>
</div>
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト

効く例(親<子)

<style>
.example2{
    line-height: 3;
    border: 1px solid #333;
}
.example2>span{
    /*効く*/line-height: 5;
}
</style>
    
<div class="example2">
    <span>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト</span>
</div>
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト

【解決方法】ブロック要素に指定する

divを使う または「display: block」でブロック要素にすると、親要素(先祖要素)のline-heightが子孫要素のline-heightより数値が大きくてもline-heightが効くようになります。

テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
<style>
.example3{
    line-height: 3;
    border: 1px solid #333;
}
.example3>span{
    display: block;
    /*効く*/line-height: 1;
}
</style>
    
<div class="example3">
    <span>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト</span>
</div>

【原因2】子要素にもline-heightが指定している

line-heightは子孫要素に継承するため、基本的には先祖要素にline-heightを指定しておけば子孫要素すべて同じline-heightにできます。

「なのに効かない!」というときは子孫要素にline-heightが指定されていないか確認しましょう。

先祖要素のline-heightより子孫要素にline-heightが優先されます。

テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
<style>
.example6{
    /*効かない*/line-height: 3;
    border: 1px solid #333;
}
.example6>div{
    line-height: 1;
}
</style>
    
<div class="example6">
    <div>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト</div>
</div>

【解決方法】子孫要素のline-heightを直す

親要素のline-heightに!importantをつけようと変わりません。

子要素のline-heightを削除するか、新たな値で上書きしましょう。

【原因3】heightがline-heightより小さい

line-heightで高さを調節することもあるかと思いますが、そんなときheightやmax-heightが指定されていないか確認しましょう。

heightがline-heightより小さいとheightが優先されてline-heightが効いていないように見えます。

テキストテキストテキスト
<style>
.example4{
    line-height: 30px;
    height: 15px;
    border: 1px solid #333;
}
</style>
    
<div class="example4">
    テキストテキストテキスト
</div>

【解決方法】heightを削除する

line-heightだけでも高さを確保できるためheightの指定を消しましょう。

最低限の高さを確保したいのであればheightではなくmin-heightにしましょう。

【原因4】paddingを指定している

「line-height: 1を指定しているのにまだ隙間がある」というときはpaddingを指定している可能性があります。

テキストテキストテキスト
<style>
.example5{
    line-height: 1;
    border: 1px solid #333;
    /*コレ*/padding: 1em 0;
}
</style>
    
<div class="example5">
    テキストテキストテキスト
</div>

【解決方法】paddingを削除する

paddingを削除しましょう。

その他の原因 記述ミスなど

スペルミスや記号のミス、CSSの優先順位のミスなどケアレスミスの可能性があります。

下記記事を参考に見直してみてください。

【まとめ】line-heightが効かない原因

【原因1】親要素(先祖要素)のline-heightが子孫要素のspanのline-heightより数値が大きいとspanのline-heightが効かない。

【原因2】先祖要素のline-heightより子孫要素にline-heightが優先される。

【原因3】heightがline-heightより小さいとheightが優先される。

【原因4】line-height:1を指定しているのに隙間があるときはpaddingの隙間の可能性がある。

以上、line-heightが効かない原因と解決方法4選でした。

マンガで読める関連記事