いくつかの概念
次のコードを見ればそれがわかります: div { 背景色: #ccc; フォントサイズ: 20px; 色: #fff; } スパン { 色: 赤; } <div>テキスト 1<span>テキスト 2</span>テキスト 3</div> 白いテキストは匿名のインライン ボックスであり、赤いテキストは コンテンツ領域に関して、W3C は次のように説明しています。 CSS 2.1 では、インライン ボックスのコンテンツ領域が何であるかは定義されていません (上記 10.6.1 を参照)。そのため、異なる UA が異なる場所に背景と境界線を描画する可能性があります。 この記事では、非置換要素のコンテンツ領域を、その要素の幅と高さに加えて、余白、パディング、境界線として定義します。コンテンツ領域はコンテンツ ボックスとして理解されるべきだと思います。 行ボックスの高さ ブラウザは、行ボックス内の各インライン ボックスの高さを計算します。計算方法はインライン ボックスによって異なります。 置換要素( インラインブロック要素: div { 背景色: #ccc; 色: #fff; } スパン { 表示: インラインブロック; 高さ: 30px; マージン: 10px; 背景: #fff; 色: 赤; } <div>xxx<span>xxx</span>xxx</div> ここで、 非置換要素の場合、高さはコンテンツ領域ではなく行の高さによって決まりますが、コンテンツ領域が行ボックスの高さを引き伸ばしているように見える場合もあります。 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> 画像では、 この例では、デフォルトでは、 ストラットは実際には目に見えない文字 x に相当します。前述のように、ストラット自体には行の高さがあるため、画像の下部に余分な隙間があります。 ギャップの理由をまとめると次のようになります。
対応する解決策:
W3C は line-height を次のように説明しています。 コンテンツがインライン レベル要素で構成されているブロック コンテナー要素では、'line-height' は要素内の行ボックスの最小の高さを指定します。最小の高さは、ベースラインの上の最小の高さと、ベースラインの下の最小の深さで構成されます。これは、各行ボックスが要素のフォントと行の高さのプロパティを持つ幅ゼロのインライン ボックスで始まるのとまったく同じです。この仮想ボックスを「ストラット」と呼びます。 私の単純な理解では、インライン要素で構成されたブロック レベル要素の場合、line-height によって行ボックスの最小の高さが決まります。ブラウザーは、各行ボックスが幅 0 のインライン ボックス (ストラット) で始まり、このストラットが親要素からフォントと行の高さを継承すると想定します。
垂直方向の配置 W3C はベースラインとミドルを次のように定義しています。 ベースライン: ボックスのベースラインを親ボックスのベースラインに揃えます。ボックスにベースラインがない場合は、下余白の端を親のベースラインに揃えます。 要素のベースラインは、親要素のベースラインに揃えられます。 middle: ボックスの垂直方向の中点を、親ボックスのベースラインに親の x 高さの半分を加えた位置に揃えます。 要素の垂直方向の中点は、親要素のベースラインに x 高さの半分を加えた値に揃えられます。 参照する CSS の詳細: フォント メトリック、行の高さ、垂直方向の配置 |
<<: JavaScript の instanceof メソッドの手動実装
MySQLはレプリケーションフィルターを動的に変更します今日遭遇した問題についてお話しします。今日は...
さまざまな理由により、debパッケージ内のさまざまなファイルの内容を直接変更する必要がある場合があり...
問題は、誰もが「メモリ リーク」について知っていることです。一般的なシナリオはいくつかあります。クロ...
目次Viteプロジェクトビルドの最適化他のやっとこれは前回の記事の補足です。設定プロジェクトで遭遇し...
導入Vue Router 、 Vue.jsの公式ルーティング マネージャーです。 Vue.jsのコア...
1. 仮想マシン(物理マシン)をインストールする仮想マシンまたは物理マシンにインストールできます。 ...
作業開発プロセス中に、顧客の名前、携帯電話番号、ID カード、およびドキュメントの種類を動的に保存す...
1. イベント委任とは何ですか?イベント委譲: イベントバブリングの特性を利用して、子要素に登録すべ...
この記事の例では、参考までに時間セレクターを実装するためのjQueryの具体的なコードを共有していま...
イベントバブリング、イベントキャプチャ、イベント委任JavaScript では、イベント委譲は非常に...
#文字列連結 concat(s1,s2); テーブル内の last_name と first_nam...
ElasticSearch クラスターは、クラスターを構築するための動態請求的方式と靜態配置文件をサ...
目次ポート関連の概念:ポートとサービスの関係1: nmapツールが開いているポートを検出する2: n...
目次1. はじめに2. 原則III. 実践3.1 インデックスプッシュダウンを使用しない3.2 イン...
背景最近、Docker 初心者の友人から、毎回プロジェクト構成ファイルにハードコーディングしてサービ...