スタイルシートのline-hightについて教えてください。


下記アドレスが現在テスト中のサイトのアドレスです。

■HTML
http://sangoclip.web.fc2.com/test/

■デフォルトCSS
http://sangoclip.web.fc2.com/test/shared/css/default.css

■リセットCSS
http://sangoclip.web.fc2.com/test/shared/css/reset.css

■Yahoo! UI LibraryのFonts CSS
http://sangoclip.web.fc2.com/test/shared/css/fonts.css


フォントサイズは全て同じです(12px相当)
ラインハイトは左から1.1
真ん中1.5
右1.8と
設定しているのですが

ラインハイトの設定の違いによりそれぞれの最初の行上部と最後の行の下部の余白が違ってしまいます。
ラインハイトを大きく設定すればするほど上下に無駄な余白がとられてしまうのですが
厳密に1px単位で余白を設定する際にとても困ってしまいます。
上下に余白を作りたくない時でもラインハイトの影響を受けて余白が出来てしまうのです
これはCSSの仕様上しょうがないのでしょうか??
それとも何か解決方法はあるのでしょうか?
どなたかアドバイスいただけると助かります。
宜しくお願いします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2009/04/04 21:54:38
  • 終了:2009/04/11 21:55:03

回答(1件)

id:sakuragaoka No.1

桜ヶ丘回答回数17ベストアンサー獲得回数32009/04/05 00:11:18

ポイント60pt

> これはCSSの仕様上しょうがないのでしょうか??

はい。

文字の上下の「余白」(?)というのはline-heightで設定された「行の高さ」のうちですから決して余計な余白ではないですね。

ですからこれは全く正しい動作だと思います。


ちょっと質問内容を確認したいのですが、「一番上の行のテキスト中心からボックスの上端まで」と「一番下の行のテキスト中心からボックスの下端まで」をそれぞれのボックスに関して揃えたいということでいいでしょうか。


どうしてもそのようなレイアウトをするのであれば、一番line-heightが大きいものに揃えてしまうのではどうでしょう。

サンプルを作ってみたのでご参照ください。

http://sakuragaoka2.web.fc2.com/test/20090404.html


具体的には、それぞれのボックスの

・line-heightの指定をem(単位なし)ではなくpixel単位にして調整を容易にする

・line-heightが小さいボックスに関してはpaddingを設定して「余白」を調整してやる

という方法をとっています。


もし一番line-heightが小さい物に「余白」(?)を揃えたいのであれば、別途少しトリッキーな方法が必要かと思います。

id:sango_clip

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

なるほど~やはりこれは正しい動作なんですねーーー

サンプルまで作ってご説明いただきとても助かりました。

よく理解できました。

ありがとうございます。

また宜しくお願いします

2009/04/05 01:09:31

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません