CSS行の高さ - 下だけ

Question

[OK]を、私はこれは私はこれが可能ではないかもしれないことを理解ばかな質問:)

ですが、要素にline-heightを適用するときに言うならばとても素敵にしてください開発をフロントエンドにはかなり新しいですh1の場合、line-heightは、その要素のtopとbottomの両方に余分なスペースを適用します。

このような意味がありますが、line-heightを要素の下部に適用して、h1, h2などの上部を他の要素と完全にアライメントすることができます。

このjsfiddleは、問題を示しています。左の一番上に正しく赤整列のbackground colourとhttp://jsfiddle.net/25UTA/

h1：http://jsfiddle.net/zja4c/1/

このjsfiddleは私が達成したいものを示したが、負のマージンを使用するように強制していますがdivですが、テキストは表示されません。

私の質問は、それゆえ、への道があるさ：

1. 適用して作成された空間の先頭に要素を揃えるだけエレメントの底部または、

2. にline-heightを適用するにはline-height何とか

Answer 1

line-heightを使用すると、改行間の適切な間隔を維持したい場合にのみ使用できます。あなたが指摘したように、ブロックレベルのH1要素の底にはパディングが発生します。あなたができる、負のマージンが何らかの理由で使用できない場合は

http://jsfiddle.net/25UTA/1/

：私は、負のマージンが最善の策だと思いますが、あなたはそれがは50px line-heightと完全にラインアップを微調整する必要があります相対的な位置付けと負の値topを使用して同様の効果を達成します。このeaiserしたりすることがありますem年代またはパーセントのフォントサイズと行の高さを使用して

http://jsfiddle.net/25UTA/2/

。

Answer 2

あなたはパディング下を完全に行の高さを忘れて使用することができ

：

そのことはできません私の知識で

fiddle

Answer 3

は、CSSを使用してline-heightだけbottomに適用するために。

paddingとしてみてください。ユーザーは1538100です。

Answer 4

displayがinlineに設定されているこれらの回答の参照要素はありません。

Line-heightは、inline要素を参照する設定です。これまでのすべての答えは、パディングとマージンを使用していましたが、これはinlineスタイルのテキストでは機能しません。

vertical-alignで行内のテキストの位置を変更できます。ここにプロパティとそのしくみについての豊富な詳細に入る記事へのリンクです：

http://christopheraue.net/2014/03/05/vertical-align/

Answer 5

簡単な解決策は、行の高さに70％を作り、下パディングの少しを追加することです。

p, h2 { 
line-height:70%; 
padding-bottom: 3px; 
}