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

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

いくつかの概念

  • 行ボックス: インライン ボックスを囲むボックス。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 が異なる場所に背景と境界線を描画する可能性があります。

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

行ボックスの高さ

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

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

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

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 の表現

推薦する

MySQL でレプリケーション フィルターを動的に変更する方法

MySQLはレプリケーションフィルターを動的に変更します今日遭遇した問題についてお話しします。今日は...

Linux deb パッケージの解凍、変更、その他の操作方法のコード例

さまざまな理由により、debパッケージ内のさまざまなファイルの内容を直接変更する必要がある場合があり...

問題におけるJS演算子の調査

問題は、誰もが「メモリ リーク」について知っていることです。一般的なシナリオはいくつかあります。クロ...

Vite2.0の落とし穴

目次Viteプロジェクトビルドの最適化他のやっとこれは前回の記事の補足です。設定プロジェクトで遭遇し...

vue-routeルーティング管理のインストールと設定方法

導入Vue Router 、 Vue.jsの公式ルーティング マネージャーです。 Vue.jsのコア...

Ubuntu 18.04 (物理マシン) で OpenWRT 開発環境を構成する方法

1. 仮想マシン(物理マシン)をインストールする仮想マシンまたは物理マシンにインストールできます。 ...

MySQL で JSON 形式のフィールドをクエリする詳細な説明

作業開発プロセス中に、顧客の名前、携帯電話番号、ID カード、およびドキュメントの種類を動的に保存す...

JavaScriptはイベントリスナーをイベント委任にバッチで追加します。詳細なプロセス

1. イベント委任とは何ですか?イベント委譲: イベントバブリングの特性を利用して、子要素に登録すべ...

jQueryは時間セレクタを実装する

この記事の例では、参考までに時間セレクターを実装するためのjQueryの具体的なコードを共有していま...

イベントバブリング、イベントキャプチャ、イベント委任に基づく詳細な説明

イベントバブリング、イベントキャプチャ、イベント委任JavaScript では、イベント委譲は非常に...

MySQL 文字列連結と null 値の設定のためのインスタンス メソッド

#文字列連結 concat(s1,s2); テーブル内の last_name と first_nam...

Docker を使用した ElasticSearch:7.8.0 クラスターのインストールに関する詳細なチュートリアル

ElasticSearch クラスターは、クラスターを構築するための動態請求的方式と靜態配置文件をサ...

Linux サーバーは最大いくつのポートを開くことができますか?

目次ポート関連の概念:ポートとサービスの関係1: nmapツールが開いているポートを検出する2: n...

MySQL Index Pushdown (ICP) とは何かを理解するための記事

目次1. はじめに2. 原則III. 実践3.1 インデックスプッシュダウンを使用しない3.2 イン...

Springboot プロジェクトに動的にパラメータを渡すための Docker の実装方法

背景最近、Docker 初心者の友人から、毎回プロジェクト構成ファイルにハードコーディングしてサービ...