CSSでline-heightが効かない問題の対処法を解説!

CSSでline-heightプロパティを設定するとテキストが上下中央揃えになりますが、line-heightプロパティ設定しても効かない場合があります。そのようなスタイルが効かない場合の対処法をサンプルコード付きで解説します。

コンテンツ [表示]

  1. 1CSSでline-heightが効かない問題
  2. 2CSSでline-heightが効かない問題の対処法
  3. 2.1CSSの文法ミスや優先順位の問題
  4. 2.2インライン要素にスタイルしている
  5. 2.3他の要素が邪魔をしている

CSSでline-heightが効かない問題

今回はline-heightプロパティが効かない際の解決策を解説します。

便利なline-heightプロパティですが、スタイルが効かなかったり、行間をスタイルできない場合があります。

その際の対処法を解説します。

CSSでline-heightが効かない問題の対処法

一概にline-heightプロパティが効かないといっても、様々な要因が考えられます。

根本的な問題からテクニカルな問題まで対処法を解説していきますので、順番にご確認ください。

CSSの文法ミスや優先順位の問題

まず最初にCSSの根本的なケアレスミスを疑ってみましょう。

クラス名が間違えていたり、プロパティの記述ミスなどです。

詳細はこちらの記事を参考にしてみてください。

あわせて読みたい
CSSが効かない原因とその対処法を解説!のイメージ
CSSが効かない原因とその対処法を解説!
CSSを更新しても「ブラウザ上でスタイルが効かない!」といった経験は誰しも一度はあります。今回の記事ではCSSが効かない場合の原因と対処法について解説しています。

インライン要素にスタイルしている

恐らくこのミスが最も多いのではないでしょうか。

line-heightプロパティはブロックレベル要素にしかスタイルできません。

spanタグなどのインライン要素にline-heightプロパティをしていないでしょうか。

下記のサンプルコードのようではインライン要素にline-heightプロパティが効かないことを確認できます。

もちろんspanタグ以外にもインライン要素にはスタイルの指定ができませんので注意してください。

他の要素が邪魔をしている

こちらのサンプルコードをご覧ください。

brタグに対してline-height: 0;を設定しているので行間が0になり、上と下のpタグがくっつくと思いきや、そのようにはなりません。

どうしてこのような空白が開くかというと、pタグにmarginプロパティが設定されているためです。

このmarginプロパティは最初からpタグにスタイルされているものなので無効化しないといけません。

この問題は最初からリセットcssを読み込めば解決できます。ぜひ下記を参考にしてみましょう。

あわせて読みたい
【コピペで出来る】おすすめのリセットCSSと使い方を解説!のイメージ
【コピペで出来る】おすすめのリセットCSSと使い方を解説!
リセットCSSとはブラウザがデフォルトで持っているCSSをリセットする目的のCSSで、種類がいくつかあり今回はその中のおすすめと使い方を紹介します。
今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

しまむ
ライター

しまむ

千葉県在住、都内の大学に通う大学1年生です。HTML/CSS/BootStrapに関する記事を執筆しています。