CSS line-height が効かない

質問

下記のように<table>の行の間隔を狭める為、CSSのline-height: をつかっているのですが、

<td>の内側に<a hrefを使っているのが原因なのか、line-heightが効きません。

sample.css
table td.aa {
font-size : 0.8em;
line-height:150%;
}

sample.html
<table>
<tr><td class="aa"><a href="http://......">ああああああああ</a>
</td></tr>
<tr><td class="aa"><a href="http://......">いいいいいいいい</a>
</td></tr>
</table>

どなたかお助けください。

回答No.3

abril · ベストアンサー

ANo.1-2様のご指摘にある様に2行以上にしてみても結果が変わらない場合について。

> 下記のように<table>の行の間隔を狭める為、CSSのline-height: をつかっているのですが、
> <td>の内側に<a hrefを使っているのが原因なのか、line-heightが効きません。

内部にaタグがあるかないかは、aタグに対して150%より広いline-heightを（"table td.aa"というセレクタより詳細度が高くなる様に）指定していない限りは、関係ないです。
また、td内の「行の間隔を狭める為」なのであれば、現在の様にtdに対して直接line-heightを指定する方法（無駄に入れ子を作らない）で間違ってもいません。
ただ、"line-height:150%;"というのはどちらかと言えば”割と広め”な値の様に思われます。これで「狭める」という事は、親要素のline-heightの値はもっと大きい（151%以上）のでしょうか？もしも親要素の値よりこちらが小さくなっていないのであれば結果として「狭め」られた様には見えないので。
それから、「狭め」たいのは本当にtd内の”行間”ですか？”余白”ではなく？もし余白であれば、paddingプロパティの値を調節するのが適切ですが。
提供されたCSSのソース以外の箇所からの継承関係がわかれば、現在思い通りの表示にならない原因が何かという事を突き止めやすくなります。もう少しCSSの情報を詳しく公開された方が宜しいかと。

お礼

詳しく解説してくださいましてありがとうございます。

回答No.2

noname#77303

こんにちは。

（回答）質問者さんがおっしゃる通り、line-heightは行間を調節する機能ですから、２行以上の文章があって始めて、その違いが大きく現れるものだと思います。
（根拠）質問者さんのソースをコピーして実行したところ、line-heightは無事に動作したので間違いないと思います。

お礼

回答ありがとうございます。

複数ある行（<tr>）間の間隔を狭めたいと思っています。

line-height:150%を 0.5emにしたら、私が望む結果となりました。

回答No.1

Suzi

一行ずつだから、または150%だから分かりづらいのではないでしょうか。

<table>
<tr><td class="aa"><a href="?http://......">?ああああああああ</a><br>
たたたたた
</td></tr>
<tr><td class="aa"><a href="?http://......">?いいいいいいいい</a><br>
ちちちち
</td></tr>
</table>

として、line-height の% を300とか数値を変えてみてはどうでしょうか。

また、tdに指定するのではなく、<div class=aa>～</div> の方が確実だと思われます。

お礼

回答ありがとうございます。
参考になりました。