行の高さ、フォントサイズ、vertical-align_html/css_WEB-ITnose についての深い理解

ディレクトリ [1] 行の高さ [2] フォント サイズ [3] 垂直方向の配置

前の単語

line-height、font-size、vertical-align の 3 つの属性は相互に依存して変化すると言えます。行間隔、垂直方向の配置の設定などはすべて、これら 3 つのプロパティの連携が必要です。この記事に関連するいくつかの用語の詳細な説明については、ブロックレベル要素の基本用語とインライン要素の基本用語を参照してください

line-height

定義

Line-height は、要素間の距離を指します。テキスト行のベースライン。ブロックレベル要素に適用される場合、line-height は要素内のテキストベースライン間の最小距離を定義します。インライン要素に適用される場合、line-height は要素のインラインボックスの高さを定義します。

値: | ;percentage> |

行の高さは、インライン要素の表示方法に大きく影響します。 line-height は実際には、インライン要素とその他のインライン コンテンツにのみ影響し、ブロック レベルの要素には直接影響しません。ブロック レベルの要素に line-height を設定することもできますが、この値はブロックのインライン コンテンツにのみ適用されます。レベル要素が影響を与えるのはその場合だけです。ブロックレベル要素で line-height を宣言すると、ブロックレベル要素のコンテンツの行ボックスの最小高さが設定されます

font-size

font-size フォント サイズは、文字列ボックスの高さを設定します実際の文字グリフは通常、文字ボックスよりも短いです

初期値: Medium

|

継承: はい

パーセンテージ: 親要素のフォントサイズに対する相対値 font-size

vertical-align

Vertical-align は垂直方向の配置を設定するために使用され、垂直方向に配置されたすべての要素が行の高さに影響します

値: ベースライン| サブ | 上 | テキスト下 | 適用対象: インライン要素、置換要素

継承: なし

パーセンテージ: 要素の行の高さに対する相対値 line-height

[注]vertical-align はブロックレベルの要素には影響しません

のコンテンツの配置

vertical-align:baseline(元素的基线与父元素的基线对齐)vertical-align:sub(降低元素的基线到父元素合适的下标位置)vertical-align:super(升高元素的基线到父元素合适的上标位置)vertical-align:bottom(把对齐的子元素的底端与行框底端对齐)vertical-align:text-bottom(把元素的底端与父元素内容区域的底端对齐)vertical-align:top(把对齐的子元素的顶端与行框顶端对齐)vertical-align:text-top(把元素的顶端与父元素内容区域的顶端对齐)vertical-align:middle(元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐)vertical-align:(+-n)px(元素相对于基线上下偏移npx)vertical-align:x%(相对于元素的line-height值)vertical-align:inherit(从父元素继承vertical-align属性的值)

inline-blockbottom gap

画像のデフォルトの垂直方向の配置がベースライン配置であるため、インラインブロック要素はブロックレベル要素にギャップを残します（原則として、画像の下端は匿名テキストの下端に配置されます）大文字の英字 X); 匿名テキストには行の高さがあるため、次の解決策

[1]display:block

垂直方向の配置は置換された要素とインライン要素にのみ適用できるため、ブロックに変更します-level要素は垂直方向の配置を無効にします

[2]親の行 -height: 0

これにより匿名テキストと行ボックスの間の距離が0になります

[3]vertical-align: top/middle/bottom