- ベストアンサー
文字の行の高さ
行の高さを指定するのはline-heightだと思いますが テーブル内の文字の高さはこれだと効果ないです。 どうしたらよいでしょうか？
- kurobon619
- お礼率76% (314/410)
- HTML
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
brが3個入ってるのは説明のためでしょうか？ 確認してみましょう まずline-heightがtdに効いているか、いないかのチェックとして 新規でtableだけのhtmlを作ってそこにcssを指定してみましょう td {border:1px solid #009933;line-height:200%;} .lh td{line-height:100%;} <table width="300"> <tr> <td>２０分 (２リットル) で出来る「ミネラル還元水素水」です.人間のからだは約３分の２が水分です、"空気と水"は体が欲するものですから、水の質は大切です。<br /> <br /> <br /> &#187;詳細はこちら</td> </tr> </table> <table width="300" class="lh"> <tr> <td>２０分 (２リットル) で出来る「ミネラル還元水素水」です.人間のからだは約３分の２が水分です、"空気と水"は体が欲するものですから、水の質は大切です。<br /> <br /> <br /> &#187;詳細はこちら</td> </tr> </table> 上が200%で下が100%です 上の指定と先ほどのhtmlの行間が明らかに違うなら td以外の場所（bodyなど）に別のline-heightが指定してあるので予想外のサイズになっているとか。 あと、その文章のマークアップだとbrではなく、それぞれをpで囲んだ方が適切だと思います。 そしてpのmargin-bottomに1emをつけるとか
その他の回答 (2)
- think49
- ベストアンサー率59% (285/482)
#2さんの回答に補足する形になりますが、line-height はインライン要素にborderを付けると挙動を実感できると思います。 ---------- <style type='text/css'> table{ border-collapse: separate; border-spacing: 1em; } td{ line-height: 200%; background-color: #fee; } span{ border: solid 1px red; } </style> </head> <body> <table> <tr> <td style='line-height: 100%;'><span>こんにちは</span><br /><span>世界</span></td> </tr> <tr> <td style='line-height: 200%;'><span>こんにちは</span><br /><span>世界</span></td> </tr> <tr> <td style='line-height: 300%;'><span>こんにちは</span><br /><span>世界</span></td> </tr> </table> ---------- line-height: 200%;を指定すると、行の上下に50%ずつ余白が出来ます。 もし「空行1つ作るつもりで line-height: 200%; を指定」していたら、物足りない印象を持つと思います。
お礼
think49さんありがとうございます。 >空行1つ作るつもりで line-height: 200%; を指定」していたら、物足りない印象を持つと思います。 なるほどそうなんですか、わかりました。
- salonpath
- ベストアンサー率48% (194/399)
ききますよ？どこに指定してるんですか？ td,th{ line-height:600%; }
補足
salonpathさんありがとうございます。 td に指定しています。 line-height:200%; にしたところ 以下のように同じtd内ですが、<br />で改行したところ（大切です。 と>>詳細はこちらの間）は 大きく行間が空き、そうでないところは固まって行間が広がりません。 ２０分 (２リットル) で出来る「ミネラル還元水素水」です.人間のからだは約３分の２が水分です、"空気と水"は体が欲するものですから、水の質は大切です。 »詳細はこちら お手数ですが教えてください。
お礼
salonpathさんありがとうございます。 なるほどわかりました、ｐの方がてっとり早いかもしれません。