いくつかの概念
次のコードを見ればそれがわかります: 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 メソッドの手動実装
方法1: .bashrcまたは.bash_profileファイルを変更するこれは、ホーム ディレクト...
MySQL はインストール時に自動的に mysql という名前のデータベースを作成します。mysql...
目次1. 浅いクローニング2. ディープクローニング1. 浅いクローニング浅いクローンでは配列やオブ...
典型的なレイアウト例上の写真のように、正方形の真ん中に一定の隙間があり、その隙間は固定されています。...
目次予備作業バックエンド構築フロントエンドページダイレクトレンダリングsetTimeout ページン...
目次1. JavaScript における数値2. Javascript の Math オブジェクト1...
MySQL インストール ファイルには、msi 形式と zip 形式の 2 種類があります。クリック...
1. xhtmlの下のスクロールバーの色元の HTML では、ページ全体のスクロール バーを次のよう...
目次序文jQuery 以外の場合は何を使うのでしょうか? DOMとイベントAJAX リクエスト要約す...
MySQL をインストールするための前提条件: CentOS 7 64 ビットをインストールし、Ce...
Remax は、実行時に構文制限のないソリューションを採用した React を使用して小規模なプロ...
インストールプロセス中に問題が発生しないように、まず依存パッケージをインストールします。 [root...
データは貴重なものであることは誰もが知っています。データをバックアップしなければ、データをそのまま放...
フォーカス画像は、画像、テキスト、動的なインタラクティブ効果を統合したコンテンツを表示する方法です。...
1. この記事で実装した効果図は以下のとおりです。レイアウトの右側に Flex レイアウトを使用し、...