セル内の行間
-
0 名前： ロビン ： 2005/10/01 21:58
- ここのTOPページを見て気になったことがあるので質問です。
サイドメニューにオススメBookMarkがありますがその下の
・INTERNET Watch-ニュース
・IT用語辞典 e-Words-用語
・エキサイト翻訳-ページ翻訳
という項目で行間を測ると1行目と2行目、2行目と3行目とも3ミリあります。
ソースを拝見してみると
<tr><td>・INTERNET Watch-ニュース</td></tr>・・・・・
という形式じゃなく
<td class="line_spacer">
・INTERNET Watch-ニュース
<br>
・IT用語辞典 e-Words-用語
</td>
という感じで一つのセル内に文字を改行してるだけですね。
この記述だと普通行間はブラウザで見れば詰めて表示され
少しぶかっこうになるはずなのに何故ちゃんと行間が3ミリも
空いてるのですか？ このからくりが何時間考えてもわかりませんでした。
セル内で3ミリの行間を実現できるのは<li>文字</li>と
<style type="text/css">
td{line-height:1.5 ;}
</style>
だけのはずなのですが・・ わかる方回答お願いいたします！
-
1 名前： Bill閣下 ： 2005/10/01 21:58
- 1.5だと3ミリというのは環境に依るのでよく分からないんですけど、
(雰囲気を伝えるための大体の表現だと解釈しましたが)
たとえば、line-heightに1.2を指定するのと、120%を指定するのとでは
結果に違いがあります。
<div style="font-size:20px;line-height:1.2;">
<span style="font-size:15px;">
この部分の行高は15px*120%=18px
</span>
</div>
<div style="font-size:20px;line-height:120%;">
<span style="font-size:15px;">
この部分の行高は20px*120%=24px
</span>
</div>
こんな感じに違います。line-heightを単位なしの数字で指定した場合、
行高の基準は、中身の部分部分のfont-sizeです。つまり柔軟に変化します。
line-heightをパーセント値で指定した場合、
行高の基準は、その要素のfont-sizeです。
このサイトのトップページの.line_spacerの中には、
SMALL要素が含まれていますので
.line_spacerのline-height:120%を単位なしの数字でたとえるとしたら
1.2よりは大きな値に相当するようなものでしょうね。
仮にSMALLのfont-sizeが80%の場合は、
1.5ぐらいに相当するようなものでしょう。
-
2 名前： Bill閣下 ： 2005/10/01 21:58
- line-heightが変化する、しないという表現は分かりにくいかもしれません。
何が継承されるかを知る方が分かりやすいかも。
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html#line-height
><number>
> この数値を要素のフォントサイズと掛け合わせて算出値とする。負の値は不正である。継承には算出値ではなく指定値を用いる。
><percentage>
> この割合を要素のフォントサイズと掛け合わせて算出値とする。負の値は不正である。
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/syndata.html#value-def-percentage
>子要素は一般に親要素の算出値を継承する
-
3 名前： ロビン ： 2005/10/01 21:58
- ＞Bill閣下さん
参考URLも見て
よく理解できました。
ありがとうございました。
