【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>CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
【原因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を削除しましょう。
その他の原因 記述ミスなど
「line-height」のつもりが「list-style」になっていたことがあります。
ソフトによっては「li」まで打つと予測変換で「list-style」がでてくることがあります。パッと見 似ているので意外と気付かなかったりします。
このようにスペルミスや記号のミス、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選でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
