文字の行の高さ

解決済

質問者：kurobon619
質問日時：2009/07/03 21:39
回答数：3件

行の高さを指定するのはline-heightだと思いますが
テーブル内の文字の高さはこれだと効果ないです。
どうしたらよいでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： salonpath
回答日時：2009/07/03 23:20

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をつけるとか

- 0
- 件

通報する

この回答へのお礼

salonpathさんありがとうございます。
なるほどわかりました、ｐの方がてっとり早いかもしれません。

通報する

お礼日時：2009/07/04 08:04

No.3

回答者： think49
回答日時：2009/07/04 01:43

#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%; を指定」していたら、物足りない印象を持つと思います。

- 0
- 件

通報する

この回答へのお礼

think49さんありがとうございます。
>空行1つ作るつもりで line-height: 200%; を指定」していたら、物足りない印象を持つと思います。

なるほどそうなんですか、わかりました。

通報する

お礼日時：2009/07/04 08:06

No.1

回答者： salonpath
回答日時：2009/07/03 21:46

ききますよ？どこに指定してるんですか？

td,th{
line-height:600%;
}

この回答への補足

salonpathさんありがとうございます。
td に指定しています。
line-height:200%;　にしたところ
以下のように同じtd内ですが、<br />で改行したところ（大切です。
と>>詳細はこちらの間）は
大きく行間が空き、そうでないところは固まって行間が広がりません。

２０分 (２リットル) で出来る「ミネラル還元水素水」です.人間のからだは約３分の２が水分です、"空気と水"は体が欲するものですから、水の質は大切です。

»詳細はこちら

お手数ですが教えてください。

補足日時：2009/07/03 22:22

通報する