CSSでline-heightが効かない問題の対処法を解説！
CSSでline-heightプロパティを設定するとテキストが上下中央揃えになりますが、line-heightプロパティ設定しても効かない場合があります。そのようなスタイルが効かない場合の対処法をサンプルコード付きで解説します。
CSSでline-heightが効かない問題
今回はline-heightプロパティが効かない際の解決策を解説します。
便利なline-heightプロパティですが、スタイルが効かなかったり、行間をスタイルできない場合があります。
その際の対処法を解説します。
CSSでline-heightが効かない問題の対処法
一概にline-heightプロパティが効かないといっても、様々な要因が考えられます。
根本的な問題からテクニカルな問題まで対処法を解説していきますので、順番にご確認ください。
CSSの文法ミスや優先順位の問題
まず最初にCSSの根本的なケアレスミスを疑ってみましょう。
クラス名が間違えていたり、プロパティの記述ミスなどです。
詳細はこちらの記事を参考にしてみてください。
インライン要素にスタイルしている
恐らくこのミスが最も多いのではないでしょうか。
line-heightプロパティはブロックレベル要素にしかスタイルできません。
spanタグなどのインライン要素にline-heightプロパティをしていないでしょうか。
下記のサンプルコードのようではインライン要素にline-heightプロパティが効かないことを確認できます。
もちろんspanタグ以外にもインライン要素にはスタイルの指定ができませんので注意してください。
他の要素が邪魔をしている
こちらのサンプルコードをご覧ください。
brタグに対してline-height: 0;を設定しているので行間が0になり、上と下のpタグがくっつくと思いきや、そのようにはなりません。
どうしてこのような空白が開くかというと、pタグにmarginプロパティが設定されているためです。
このmarginプロパティは最初からpタグにスタイルされているものなので無効化しないといけません。
この問題は最初からリセットcssを読み込めば解決できます。ぜひ下記を参考にしてみましょう。
