フロントエンドで遊ぶ -- CSS 垂直 things_html/css_WEB-ITnose

CSS の権威あるガイドを見て、行の高さと垂直方向の配置についての貴重な探求であることがわかります

行の高さ

line-height プロパティは、テキスト行のサイズではなく、テキスト行のベースライン間の最小距離を指します。フォント

• まず第一に、ベースラインとは、英語の 4 行グリッドの最後から 2 番目の線を指します。

• 次に、font-size に関して、フォント サイズは font-size によって形成される em ボックスによって制限されます。

• 最後に、line-height が設定されると、line-height によってベースライン間の最小距離が決まります。

上の画像について

いくつかのテキスト要素を含む行。

;

• 1 行のテキストがライン ボックスに配置され、ライン ボックスは 1 つ以上のインライン ボックス (インライン ボックス) で構成されます。上の図には 5 つのインライン ボックスがあります。

• インライン ボックス内のテキスト コンテンツはコンテンツ領域 (点線のボックスで表示) を形成します。コンテンツ領域のサイズはテキスト サイズに関連しており、font-size がテキスト サイズを決定するため、font-size が機能します。コンテンツ領域にあります。 line-height が設定されていない場合、インライン ボックスの高さはコンテンツ領域によって決まります。

• line-height がインラインボックスの高さに影響し、line-height が 20px、font-size が 16px の場合、コンテンツ領域の上下に 2px の間隔が設定されます。このようにして、上下のベースライン間の距離は 4px 増加します

• ラインボックスの高さは、インラインボックスの中で最も高いものによって決まります。

• height は、行ボックスの高さではなく、コンテナの高さを設定します。コンテナの高さが行ボックスの高さと正確に等しい場合、行テキストはコンテナ内で垂直方向の中央に配置されます。
  line-height の例

vertical-align

vertical-align
は次の対象で動作します: インライン要素と表のセル
デフォルト値: Baseline

• baseline: 要素のベースラインは親のベースラインと揃えられます要素。画像やフォーム入力要素、あるいはその他の置換要素など、要素にベースラインがない場合、要素の下部は親要素のベースラインに揃えられます。

• bottom: 要素のインラインボックスの下部を行ボックスの下部に揃えます

• text-bottom: text-bottom はインラインテキストの下部を指します。この値は、置換要素やその他のタイプの非テキスト要素では無視されます。整列する要素のインラインボックスの下端が、親要素のコンテンツエリアの下端に揃えられます。

• 中: 多くの場合 (常にではありませんが) 画像に適用されます。 middle は、要素の垂直方向の中点を、親要素のベースラインから 0.25em 上の点に揃える傾向があります。

• パーセント: 要素のベースライン (または置換要素の下端) を、親要素のベースラインに対して指定された量だけ上げたり下げたりします (指定したパーセンテージは、要素の行の高さのパーセンテージとして計算されます。親要素の行の高さを基準にして)。

  りー