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

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

いくつかの概念

  • 行ボックス: インライン ボックスを囲むボックス。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 の表現

推薦する

Linux でログインタイムアウト後に非アクティブなユーザーを自動的にログアウトする

方法1: .bashrcまたは.bash_profileファイルを変更するこれは、ホーム ディレクト...

MySQLユーザー権限テーブルについての簡単な説明

MySQL はインストール時に自動的に mysql という名前のデータベースを作成します。mysql...

JavaScriptのクローン作成についての簡単な説明

目次1. 浅いクローニング2. ディープクローニング1. 浅いクローニング浅いクローンでは配列やオブ...

ページに間隔を空けてグリッドレイアウトを完璧に実装する方法

典型的なレイアウト例上の写真のように、正方形の真ん中に一定の隙間があり、その隙間は固定されています。...

バックエンドから返される 100,000 個のデータをフロントエンドでより適切に表示するにはどうすればよいですか?

目次予備作業バックエンド構築フロントエンドページダイレクトレンダリングsetTimeout ページン...

JavaScript の数値および数学オブジェクトの概要

目次1. JavaScript における数値2. Javascript の Math オブジェクト1...

MySQL 5.7.25 のインストールと設定方法のグラフィックチュートリアル

MySQL インストール ファイルには、msi 形式と zip 形式の 2 種類があります。クリック...

HTML のスクロールバーについて/スクロールバーの削除

1. xhtmlの下のスクロールバーの色元の HTML では、ページ全体のスクロール バーを次のよう...

JQuery を放棄すべきでしょうか?

目次序文jQuery 以外の場合は何を使うのでしょうか? DOMとイベントAJAX リクエスト要約す...

CentOS7 64ビットインストールmysqlグラフィックチュートリアル

MySQL をインストールするための前提条件: CentOS 7 64 ビットをインストールし、Ce...

React を使って小さなプログラムを書くための Remax フレームワークのコンパイル プロセス分析 (推奨)

Remax は、実行時に構文制限のないソリューションを採用した React を使用して小規模なプロ...

64 ビット CentOs7 ソース コードのインストール mysql-5.6.35 プロセス共有

インストールプロセス中に問題が発生しないように、まず依存パッケージをインストールします。 [root...

MySQLデータベースを定期的に自動バックアップする方法

データは貴重なものであることは誰もが知っています。データをバックアップしなければ、データをそのまま放...

ポータルサイトのフォーカス画像のデザインに関するいくつかの結論

フォーカス画像は、画像、テキスト、動的なインタラクティブ効果を統合したコンテンツを表示する方法です。...

フレックスレイアウトの改行スペースでの align-content の使用

1. この記事で実装した効果図は以下のとおりです。レイアウトの右側に Flex レイアウトを使用し、...