ラムネグから一言：寝る前に読むとくだらなすぎて逆に寝れると好評なすごい適当なブログをこっちではじめてます.
spanにline-heightが効かない！
特定の場所だけ行間を狭くしたいと思い、line-heightを使って、行間を狭くするためのクラスを作ったのが発端でした。
このクラスをpタグにつけるとイメージどおり行間を狭められたのですが、spanタグに使ったところ行間が狭まりませんでした。
そんなline-heightがうまく効かないときの対策法です。
spanにline-heightが効いていない症状対策
spanタグにline-heightを設定すると、こうなります。うまく行間が設定できていません。
対策としては、display:block;を追加することで、spanにもline-heightの設定が効くようになりました。
【ダメな例】
ブラウザ上の見た目：
Mom?Is here a cat cafeteria?But that isn’t a cat.Isn’t it?That is a salamander.She had lost herself when she just had hiccuped,and she got the body that can only say「Mutton」.
ソースコード：
<p>
<span style="line-height: 1;">
Mom?Is here a cat cafeteria?But that isn’t a cat.Isn’t it?That is a salamander.She had lost herself when she just had hiccuped,and she got the body that can only say「Mutton」.
</span>
</p>
【対策後】
ブラウザ上の見た目：
Mom?Is here a cat cafeteria?But that isn’t a cat.Isn’t it?That is a salamander.She had lost herself when she just had hiccuped,and she got the body that can only say「Mutton」.
ソースコード：
<p>
<span style="line-height: 1; display:block;">
Mom?Is here a cat cafeteria?But that isn’t a cat.Isn’t it?That is a salamander.She had lost herself when she just had hiccuped,and she got the body that can only say「Mutton」.
</span>
</p>
ということでdisplay:block;を追加することで正しく行間を狭めることが出来ました。
spanタグに関わらずインライン要素だとすべてで起こる現象ですので、「あれ？なんか行間がうまく設定できていないな」と感じたらdisplay:block;を追加してみてください。
- インライン要素一覧
-
<a><abbr><acronym><applet><b><basefont><bdo><big><br><button><cite><code><dfn><em><font><i><iframe><img><input><kbd><label><map><object><q><s><samp><script><select><small><span><strike><strong><sub><sup><textarea><tt><u><var>
display:block;-
display:block;を指定すると指定した要素をブロック要素として扱うようになります。pタグにブロック要素を含めることはhtml上はやってはダメ！なのですが、cssや「style=」の中で指定する分にはあくまで見た目をブロック要素とみなすだけですので、HTMLのルールには反しないので安心です。
インライン要素にline-heightが効かない原因
ここからは原因の推測になります。
CSS の line-height プロパティは、ブロックレベル要素に含まれるラインボックスの、最小の高さを定義します。非置換インライン要素では、line-height は行ボックスの高さの計算に使われる、高さを定義します。
https://developer.mozilla.org/ja/docs/Web/CSS/line-height
この「非置換インライン要素では、line-height は行ボックスの高さの計算に使われる、高さを定義します。」というところが原因になっていると思っています。
通常line-heightを使うときって前半の部分の「ラインボックスの、最小の高さを定義します。」として使っているつもりだけど、インライン要素に対して使うときは違ったline-heightの使われ方になっている。
実際にline-heightの数字を上げて行間を広げていくと、広げる分に関してはspan等のインライン要素にもちゃんと効きました。なのでline-heightは一応効いているんですよね。狭めるときの計算の仕方がインライン要素とブロック要素では違い、それがうまく効いていなく感じる原因になっていると思います。
【おしらせ、というか完全なる宣伝】
文体がもうぜんぜん適当すぎてあれだけどものすごい自由に書いてるブログ「檸檬だくだく」もよろしく.寝る前に読める恐ろしくくだらないやつです.
こんなにも一ミリも目を引かれないタイトルを取り扱ってます： ココア20g / ハイチュウとかってさ / なぜ米と小麦を食べようと思ったのかの謎 /
