- ベストアンサー
line-height
<html> <head> <title>test</title> </head> <body> <style type="text/css"> p.example1{ line-height:10em; } </style> <p class="example1">test1</p> <p class="example1">test2</p> </body> </html> line-heightを使うと、上の余白もあいてしまうのですが 行間だけ開けて、上下の余白は開けない方法はありますか？ 不可能だったら文字と文字の間に改行を入れたりした方がいいのでしょうか？
- kyalolrjnxuxm
- お礼率65% (229/347)
- CSS
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
え～っと、恐らく "line-height" で定義されるスタイルの理解が乏しいor間違っているため、なかなか思うようなデザイン結果を得られないのだと思います。まず第一に "line-height" は行間の隙間をざっくりと上下同時に指定し、また上下は必ず同じ値が適用されます（平均値）。ですので添付画像の様な結果になるのは極めて正しい結果です。 ◆line-height の数値計算式 ・line-height: 18px, font-size:11px の場合... ( 18 -11 ) /2 == 3.5px が適用値となる. つまり {(line-height - font-size) / 2} が実際に適用される数値になりますので、例文の様に「em」で設定した場合でも「line-height:10em, font-size:1em」と解釈され... ・( 10 -1 ) /2 == 4.5em ～以上の様に計算され、4.5em が "<p>タグで囲まれた文章の上下に適用" となります。 ◆上下左右に異なる数値を設定する この場合は "line-height" では無く、"margin" と "padding" を使って個別に数値設定します。 p.example1 { line-height:1em; margin: 0.1em 0.5em 10em 0.5em; padding:3px; } とりあえずサンプルの数値を適当に弄りながら、質問者の環境に合った最適解を模索してみてください。 P.S. 尚、CSSで上下左右の値をまとめて指定する場合、左から順番に 上, 右, 下, 左 ～となります。これは4つ値を記述した場合で、2つや3つしか値を記述しないと指定順番がその都度に変化します。 ・値が1つ: 上下左右の全てが同じ値に. ・値が2つ: 上下, 左右 ・値が3つ: 上, 左右, 下 ・値が4つ: 上, 右, 下, 左 ～以上の様な記述法則に従いますので注意して値指定を記述してください。
その他の回答 (1)
- trytobe
- ベストアンサー率36% (3457/9591)
逆に、HTML の中身で、改行のみで何の指示もしていない行があるから、「その行数だけ空白行が表示されている」のだと思います。 段落のような区切りが見えづらくなるかとは思いますが、そういう「改行されてしまう空行」は削除して詰めてしまいましょう。
お礼
どうもありがとうございました。
お礼
どうもありがとうございました。