html - CSS行の高さ-下のみ

Question

わかりました。私はフロントエンド開発にまったく慣れていないので、これがばかげた質問である場合は親切にしてください:)

これは不可能かもしれないことを理解していますがline-height、要素に適用する場合、たとえば、h1は、その要素のとのline-height両方に余分なスペースを適用します。topbottom

この種の意味はありますが、要素の下部にのみline-height適用したいので、h1, h2他の要素と完全に整列させることができます。

このjsfiddleは問題を示しています：http： //jsfiddle.net/zja4c/1/

このjsfiddleは、私が達成したいことを示していますが、負のマージンを使用することを余儀なくされています：http: //jsfiddle.net/25UTA/

赤のh1withbackground colourは左上に正しく整列しdivますが、テキストは整列しません。

したがって、私の質問は次の方法があります。

score 8 · Accepted Answer

line-height改行間の適切な間隔を維持したい場合は、使用することが唯一のオプションです。H1ご指摘のとおり、パディングはブロックレベルの要素の下部で行われます。負のマージンが最善の策だと思いますが、50pxと完全に一致するように微調整する必要がありますline-height。

何らかの理由で負のマージンを使用できない場合は、相対位置と負のtop値を使用して同様の効果を得ることができます。

'sまたはパーセンテージのフォントサイズと行の高さを使用emすると、これが簡単になる場合があります。

score 4 · Accepted Answer

これらの回答はいずれも、にdisplay設定された要素を参照していませんinline。

Line-heightinline要素を参照する設定です。inlineこれまでのすべての回答は、スタイル付きテキストでは機能しないパディングとマージンの使用に言及しています。

行内のテキストの位置を。で変更できますvertical-align。プロパティとその仕組みについて詳細に説明している記事へのリンクは次のとおりです。

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

行の高さを完全に忘れて、padding-bottomを使用することができます。

score 0 · Accepted Answer

私の知る限り、 cssの使用line-heightのみに適用することはできません。bottom

したがってpadding、user1538100が言ったように試してみることができます。

5 に答える 5