css - 文字 - vertical-align 画像




「親ボックスのベースライン」の定義は何ですか? (3)

以下の10のビジュアルフォーマットモデルの詳細 - W3Cからの抜粋を理解できません。

抜粋:

baseline:ボックスのベースラインを親ボックスのベースラインと揃えます。 ボックスにベースラインがない場合は、下余白の端を親のベースラインと揃えます。

この文脈で「親ボックスのベースライン」とはどういう意味ですか? 「親ボックス」とは、親要素によって設定された行ボックスまたはボックスを指しますか。 「親ボックスのベースライン」を計算する方法


この絵を見て、正確にbaselineが何かを確かめてください。

それでは、ドキュメントが何を言いたいのかを説明しましょう。

vertical-align: baselineを定義すると、要素は上の図のように親要素のベースラインのベースラインに揃えられます。


この仕様は、親ボックスが上記のいくつかの段落だけを参照していることを示しています。

以下の値は、親インライン要素、または親ブロックコンテナ要素のストラットに関してのみ意味を持ちます。

そのため、親ボックスは親要素によって生成されたボックスを指し、他の要素と同じように親ボックスのベースラインを計算します。


また、仕様に従って、特定の定義も見つかりませんでした。

以下の値は、親インライン要素、または親ブロックコンテナ要素のストラットに関してのみ意味を持ちます。

親ボックスに子としてテキストノードがある場合、子テキストノードのベースラインは親ボックスのベースラインであると推測できます。

例えば:

.parent {
  display: inline;
  background:pink;
  font-size:40px;
  font-family:Microsoft Yahei;
  line-height:2;
  vertical-align:baseline;
}
.element-child {
  font-size:25px;
}
<div class="parent">
   textNode child of parent 
  <span class="element-child">
    element-child with another font-size
  </span>
</div>

子テキストノードの有無にかかわらず、親ボックスのベースラインは、子テキストノードのベースラインと同じ位置にあります。





css