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

回答No.2

naokita · ベストアンサー

困ると言われても、それが世界標準。　現状の方が使いやすいし、質問者さんの仕様になったら、こっちも困るよ・・・
行間と言うより、文字の余白と考えれば納得出来る。
それに、1pxと言っているが、そんな配置にしたらフォントの違いやFirefoxとかフォントサイズの大小切り替えで一発で配置が崩れる・・・
---------------------------------
とりあえず、下記CSSで１行目は統一可能。
div:first-line{line-height:1.1 !important;}

最終行は、改行無しの１行内に収まる範囲の短い文章にするなら、
１行の p として margin の上下で設定出来る。
---------------------------------
そもそも、上記のような設定はあまりしない。
１個目と２個目にpaddingを３個目と均等になる様に与えてやれば、top と bottom の間隔が均等に全部揃うから。その方が見易いかも。

お礼

やはり仕様なんですね
後はpaddingやmarginで上下の余白設定をして対応するしかないんですね
貴重なご意見ありがとうございました

回答No.3

神崎 渉瑠（@taloo）

> ラインハイトの設定の違いによりそれぞれの最初の行上部と最後の行の下部の余白が違ってしまいます。

たぶんそれはmarginかpaddingだと思います。
そっちの設定は同じにしてますか？

お礼

やはり仕様なんですね
後はpaddingやmarginで上下の余白設定をして対応するしかないんですね
貴重なご意見ありがとうございました

回答No.1

nori_007

ブラウザの環境は？何を基準に考えていますか？
この辺の挙動は、ブラウザで変わると思います。

また、現実的には 1px 単位で余白の設定なんて無理だと思います。余裕を持ち、文字のサイズを変更しても大きく崩れない等の配慮も必要だと思います。

一番良いは目標になるサイトのソースを参考にするのが良いと思います。

お礼

やはり仕様なんですね
後はpaddingやmarginで上下の余白設定をして対応するしかないんですね
貴重なご意見ありがとうございました