人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

スタイルシートの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の仕様上しょうがないのでしょうか??
それとも何か解決方法はあるのでしょうか?
どなたかアドバイスいただけると助かります。
宜しくお願いします。


●質問者: sango_clip
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:CSS HTML UI Yahoo! アドバイス
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● 桜ヶ丘
●60ポイント

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

はい。

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

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


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


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

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

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


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

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

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

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


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

◎質問者からの返答

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

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

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

よく理解できました。

ありがとうございます。

また宜しくお願いします

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ