行の高さと垂直方向の配置についての深い理解

いくつかの概念

行ボックス: インラインボックスを囲むボックス。1 つ以上の行ボックスが積み重ねられ、HTML 要素をサポートします。
インライン(レベル)ボックス: インライン要素で囲まれたボックス、またはテキストのみを含む匿名ボックスになります。
コンテンツ領域: 置換されない要素の場合、コンテンツ領域の範囲はフォントサイズとフォント自体によって決まります。置換される要素の場合、コンテンツ領域の範囲は要素自体の幅と高さによって決まります。
ベースライン: 要素のベースラインの位置は、要素内の文字 x の下の位置によって決まります。もちろん、ベースラインの位置はフォントによって異なります。

次のコードを見ればそれがわかります:

div {
  背景色: #ccc;
  フォントサイズ: 20px;
  色: #fff;
}
スパン {
  色: 赤;
}
<div>テキスト 1<span>テキスト 2</span>テキスト 3</div>

白いテキストは匿名のインラインボックスであり、赤いテキストはspanで囲まれたインラインボックスです。これらの 3 つのインラインボックスは、行ボックスを形成します。この例ではdiv行ボックスによって拡張されているため、灰色の領域として理解できます。テキストが複数行ある場合は、複数の行ボックスが表示されます。

コンテンツ領域に関して、W3C は次のように説明しています。

CSS 2.1 では、インラインボックスのコンテンツ領域が何であるかは定義されていません (上記 10.6.1 を参照)。そのため、異なる UA が異なる場所に背景と境界線を描画する可能性があります。

この記事では、非置換要素のコンテンツ領域を、その要素の幅と高さに加えて、余白、パディング、境界線として定義します。コンテンツ領域はコンテンツボックスとして理解されるべきだと思います。

行ボックスの高さ

ブラウザは、行ボックス内の各インラインボックスの高さを計算します。計算方法はインラインボックスによって異なります。

置換要素（ img 、 inputなど）、インライン*要素、またはフレックスボックス内の子要素の場合、高さはそのマージンボックスによって決まります。

インラインブロック要素:

div {
  背景色: #ccc;
  色: #fff;
}
スパン {
  表示: インラインブロック;
  高さ: 30px;
  マージン: 10px;
  背景: #fff;
  色: 赤;
}
<div>xxx<span>xxx</span>xxx</div>

ここで、 spanインラインボックスの高さは、 height + margin 2です。高さの値が auto の場合、高さは line-height + margin 2 に等しくなります。

非置換要素の場合、高さはコンテンツ領域ではなく行の高さによって決まりますが、コンテンツ領域が行ボックスの高さを引き伸ばしているように見える場合もあります。

div {
  背景色: #ccc;
  フォントサイズ: 20px;
  色: #fff;
  フォントファミリー: Sana;
}
スパン {
  背景: #fff;
  色: 赤;
}
<div>xxx<span>xxx</span>xxx</div>

この図は、行ボックスを引き伸ばすのはコンテンツ領域ではなく行の高さであることを明確に示しています。

この記事では、line-height の高さを表すために virtual-area height を使用していますが、私の理解では、実際にはインラインボックスの高さです。

ラインボックス内のすべてのインラインボックスの最高点と最低点によって、その高さが決まります (この計算には、後述する支柱の高さも含まれます)。

置換されない要素の余白、パディング、境界線は、行ボックスの高さの計算には影響しません。インラインレベルボックスの行の高さがコンテンツ領域より小さい場合、行ボックスの高さはコンテンツ領域より小さくなります。このとき、要素の背景とパディングは行ボックスの外側にオーバーフローします。

次のコードはこの問題を示しています。

div {
    背景: #eee;
    境界線: 1px実線 #000;
    ボックスのサイズ: 境界線ボックス;
    フォントサイズ: 50px;
    行の高さ: 10px;
}
スパン {
    背景: 赤;
    マージン: 10px;
    パディング: 10px;
}
<div><span>xxx</span></div>

リーディング：

コンテンツ領域の高さとインラインボックスの高さの差が行間です。この行間はコンテンツ領域の上部と下部に均等に追加されるため、コンテンツ領域は常にインラインボックスの中央 (垂直方向の中央) に配置されます。

ストラット:

ブラウザは、各行ボックスの先頭に、幅が 0 で文字のない匿名のインラインボックス (ストラットと呼ばれる) があると想定します。このストラットは親要素から行の高さを継承するため、その高さは行ボックス全体の高さの計算に影響します。

例

div { 背景: #eee; 境界線: 1px solid #000; ボックスサイズ: border-box; }
<div><img src="./image.png" alt=""></div>

画像では、 imgと外側のdivの間に隙間があることがわかります。これは、上記の支柱によって発生しています。

この例では、デフォルトでは、 imgの下端が親要素のベースライン ( img { vertical-align: baseline } ) に揃えられます。これは、実際には Strut ベースラインが配置されている場所です。次の図に示すように:

ストラットは実際には目に見えない文字 x に相当します。前述のように、ストラット自体には行の高さがあるため、画像の下部に余分な隙間があります。

ギャップの理由をまとめると次のようになります。

ストラットには行の高さがある
vertical-alignのデフォルト値はbaselineです

対応する解決策:

Strut の行の高さを変更します。Strut の行の高さは直接設定できないため、親要素の行の高さを設定して Strut に継承させるか、フォントサイズを変更する必要があります。
vertical-alignをline-height以外の値に設定する

W3C は line-height を次のように説明しています。

コンテンツがインラインレベル要素で構成されているブロックコンテナー要素では、'line-height' は要素内の行ボックスの最小の高さを指定します。最小の高さは、ベースラインの上の最小の高さと、ベースラインの下の最小の深さで構成されます。これは、各行ボックスが要素のフォントと行の高さのプロパティを持つ幅ゼロのインラインボックスで始まるのとまったく同じです。この仮想ボックスを「ストラット」と呼びます。

私の単純な理解では、インライン要素で構成されたブロックレベル要素の場合、line-height によって行ボックスの最小の高さが決まります。ブラウザーは、各行ボックスが幅 0 のインラインボックス (ストラット) で始まり、このストラットが親要素からフォントと行の高さを継承すると想定します。

Normal は line-height のデフォルト値であり、W3C では明確な定義がありません。通常は、コンテンツ領域を計算要素として使用します。
行の高さは、2 つのベースライン間の距離ではありません。
em 単位は親要素から継承したfont-sizeに基づいて行の高さを計算するため、 line-heightには em 単位ではなく数値を使用することをお勧めします。

垂直方向の配置

W3C はベースラインとミドルを次のように定義しています。

ベースライン: ボックスのベースラインを親ボックスのベースラインに揃えます。ボックスにベースラインがない場合は、下余白の端を親のベースラインに揃えます。

要素のベースラインは、親要素のベースラインに揃えられます。 imgなど、要素にベースラインがない場合は、マージンの下端が親要素のベースラインに揃えられます。

middle: ボックスの垂直方向の中点を、親ボックスのベースラインに親の x 高さの半分を加えた位置に揃えます。

要素の垂直方向の中点は、親要素のベースラインに x 高さの半分を加えた値に揃えられます。

参照する

CSS の詳細: フォントメトリック、行の高さ、垂直方向の配置
https://meyerweb.com/eric/css/inline-format.html
https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
https://www.w3.org/TR/CSS2/visudet.html#インラインボックスの高さ

<<: JavaScript の instanceof メソッドの手動実装

>>: HTML Web ページにおける URL の表現