とっちゃん@nyanco! です。
今回はline-heightの詰める方だけが効かない時の対処法【解決済】のご紹介です。
line-height で「行間を詰める」ができない
webページのテキストの行間を調整したい時、CSSのline-heightを使いますが、行間を広げることはできるのになぜか行間を狭くする設定だけができないという謎現象にたまに出くわして悩まされておりました。
例えば、以下のような画像のキャプションの行間をもう少し詰めたい時…
CSSで line-height: 1.1em; などに設定しても行間は全く変わらず。
でも試しに line-height: 3em; と行間を広くする設定にしてみると…
なぜか広げる方だとCSS通りになる？
このことから、CSSが全く効いてないわけではなく行間を詰める設定だけが無視されているということになります。
なぜそんな中途半端なことが起こるんだ…とモヤモヤしつつ調べてみると、原因と解決法がすぐに見つかりました。
結論：インライン要素には効かないのでブロック要素にする
まず、原因はこちら。
インライン要素にはline-hightの行間を詰める方が効かないという仕様
続いて、解決法はこちら。
「display:block;」を指定してインライン要素をブロック要素にする
先程の例のキャプションは見事に spanタグ でインライン要素だったので、CSSに display:block; を追記してみたところ…
バッチリ行間が詰まりました！（ちょっと詰まり過ぎですが… ^^;）
このCSSの謎仕様についてですが、下記サイト様で推測がなされてました。
…筆者には難しくて理解し切れませんでしたが、とにかくインライン要素にはline-heightの詰める方が効かないので display:block; でブロック要素にする！とだけ覚えておくことにしました。
本記事がどなたかの参考になれば幸いです。
今回は以上となります。
最後まで読んでいただきましてありがとうございました！
それではまた〜✧٩(ˊωˋ*)و✧
コメント
[…] line-height の詰める方だけが効かない時の解決法 | nyanco! ブログ […]