布语

この共有テーマは、張鑫旭が執筆した『Css 世界』の第 5 章の一部を参照しています。

x と基線#

Css における基線の出現は、ある程度フォントのタイポグラフィの問題を解決するためのものであり、Css における基線の定義は文字 x に関連しています。文字 x の下辺の線が基線です。

x-height
x-height は Css における概念であり、属性として存在するわけではありません。x-height は通常、小文字の x の高さを指し、中位線と基線の間の距離とも呼ばれます。

この図では、midian 線が見えます。この線は、vertical-align: middle;で使用する middle 線とは異なります。規範における middle の大まかな定義は、基線から上に 1/2x-heightの距離であり、文字 x の交差点に近似しています。
以下の図は、私が一時的に理解した middle 線の位置です。この線は、*line-height: 0;のときに観察されました。この線の位置はtext-decoration: line-through;* を通じても観察でき、これら 2 本の線の大まかな位置は同じです。

x から vertical-align へ#

vertical-align 属性は基線の整列によく使用されますが、場合によってはこの属性が機能しない理由に直面することがあります。なぜなら、vertical-align が整列する基準はインラインレベルの要素だからです。インラインレベルの要素のデフォルトの基線は baseline であり、この基線 baseline は文字 x の下辺の線から取られています。中国語や他の文字を使用する場合、整列していないと感じることがありますが、それは中国語や一部の英語、または他の文字の下辺の線が baseline よりも低いため、視覚的な効果として文字が沈んでいるように見えるからです。以下の図を参照してください。

より整列させたい場合は、*vertical-align: -3px;* を使用して手動で底部を調整できます。ただし、調整する際には、調整の基準が baseline に基づいて上下に調整されることを明確に理解しておく必要があります。また、この調整は精度があり、各ブラウザがこの属性を良好にサポートしています。

インライン要素の基礎 line-height#

まず一つの質問を提起します。それは、ボックスは一体何によって支えられているのかということです。最初の答えは、基本的に内容（font-size）がボックスを支えているというものでした。しかし、参考書の読書と自分自身の実践を通じて、以前の答えに疑問を持ち、最終的には否定するに至りました。以下の例から大まかに見てみましょう。

なぜ最初にボックスが内容の font-size によって支えられていると感じたのでしょうか？

これは line-height のデフォルト値の計算方法を考慮する必要があります。font-family がフォントに与える影響を除外すると、通常、line-height のデフォルト値は normal、すなわち約 1.2 です。この値はブラウザによって具体的に測定する必要があります（各ブラウザで差異があるかもしれません）。

一方で、1.2 は何を意味しているのか？どのように計算されているのか？文字のタイポグラフィにおける行高はどのように規範されているのか？
実験の結果、この値は自身の要素の font-size 値に基づいて計算されることがわかりました（注意：font-size は継承性を持ちます）。文字のタイポグラフィにおける line-height の規範は、2 つの側面を考慮する必要があります：一つはテキストの単行の状況、もう一つはテキストの多行の状況です。

• テキスト単行
  • 個人的な理解として、単行の場合、line-height は主に内容の高さをサポートすることに現れます。
• テキスト多行
  • 多行の場合、line-height は一方で各行のテキストの高さをサポートし、もう一方では各行の要素と次の行の要素の間の baseline の距離を表します。

なぜここではテキストの状況だけを述べ、他のインラインレベルの要素における line-height の現れについては議論しなかったのでしょうか？
ここでは img 要素を例にとって分析します。まず、img 要素はデフォルトではインラインレベルの要素ですが、img にはもう一つの特徴があります。それは、img が置き換え可能な要素であるということです。置き換え可能な要素とは、タグの属性を変更することでページの表示に影響を与える要素のことです。ここでは、置き換え可能な要素と非置き換え可能な要素の違いについては詳しく説明しません。インラインレベルの置き換え可能な要素にとって、line-height は表示の大きさに影響を与えません。ここで、皆さんが見ることができる例を用意しました。

この例から、確かにline-heightがimgの高さに影響を与えていないことがわかります。それに伴う問題は、なぜボックスの高さが256pxになっているのかということです。この問題がもたらす概念は、幽霊空白ノードの存在です。この概念は普段は聞いたことがないか、存在を確実に感じたことがないかもしれません。同様に、幽霊空白ノードの存在を証明するための例を用意しましたので、皆さんに見ていただきます。 この例を見た後、spanには内容がないのに、なぜ容器の高さがあるのかが明らかになります。これは幽霊空白ノードの存在によるものです。幽霊空白ノードはHtml5規範の文書に存在し、ページのヘッダーで``````が指定されている文書に存在します。また、上記の例から幽霊空白ノードのいくつかの特徴を発見できます： 1. インラインレベルの要素に存在する 2. インラインレベルの要素のように振る舞い、自身に空白文字が存在する

なぜデフォルト値 normal が約 1.2 なのでしょうか？
測定の結果、Chrome における line-height のデフォルト値 normal は約 1.27 を示します（誤差があるかもしれません）。以下の図は、line-height: 1; の場合の文字のタイポグラフィの表示状況を示しています。

また、codepen を通じて直接両者の文字のタイポグラフィの効果の違いを確認できます：

*line-height: 1;*の場合、文字が上下に重なってしまう可能性があることが明確に示されています（なぜこのような状況が生じるのかはmiddleの示意図とテキストの多行の状況を組み合わせて理解してください）。このような文字のタイポグラフィは、読みやすさにとって不利であり、ページのタイポグラフィが窮屈に見える原因となります。

line-height と vertical-align#

line-height と vertical-align の主な関係は、*vertical-align: 10%;* を使用する場合、このパーセンテージが何に基づいて計算されているかを明確に理解する必要があります。このパーセンテージは line-height に基づいて計算され、その後、要素の baseline が親要素の baseline に対して与えられたパーセンテージに整列します。

応用#

画像の隙間の発生と修正方法
以下に例といくつかの解決方法を示して、この問題を説明します。

なぜ画像の下辺に数ピクセルの距離が生じるのでしょうか？この隙間の発生は、幽霊空白ノード、line-height、vertical-alignの3つの要因によって影響を受けます。上記の例で、文字xを使用した理由の一つは、幽霊空白ノードを代替し、その原因をより明確に示すためです。現在のフォントは16pxで、Chromeにおけるline-height: normalの解析値は約1.27です。行高は20.32pxと計算でき、四捨五入すると20pxになります。フォントxの下辺の線は、容器の境界から少なくとも2pxの距離があります（この距離はフォントに関連しています）（ps: 半行間隔、これはページのタイポグラフィにおける概念であり、個人的にはまだ探求していません）。手動でvertical-alignを移動させて大まかに比較することができます。

未探求 / 補足すべき知識点#

1. 行間と半行間 => 興味があれば『Css 世界』5.2.1 部分を参照してください。
2. vertical-align の深い理解 => 興味があれば『Css 世界』5.3.4~5.3.8 部分を参照してください。