CSS の行の高さと配置_html/css_WEB-ITnose

テキストの垂直方向の配置

行の高さ

line-height プロパティは、フォントのサイズではなく、テキスト行のベースライン間の距離を指定し、各要素ボックスの高さをどの程度増減するかを決定します。 line-height は行間隔を制御します。行間隔は、フォント サイズを超えたテキスト行間の余分なスペースです。つまり、行の高さの値とフォント サイズの差が行間隔になります。
ブロックレベルの要素に適用される場合、line-height は要素内のテキストのベースライン間の最小距離を定義します。絶対値ではなく最小距離を定義することに注意してください。テキストのベースライン間の距離は行の高さの値よりも大きくなる可能性があります。 line-height は置換される要素のレイアウトには影響しませんが、置換される要素には適用されます。

テキスト行の構築

インラインボックス
テキスト行の各要素は、フォントのサイズによって決定されるコンテンツ領域を生成します。このコンテンツはインライン ボックスを生成します。他の要素が存在しない場合、このインライン ボックスは要素のコンテンツ領域と完全に等しくなります。 line-height によって生成される行間隔は、各行内のボックスの高さを増減する要因の 1 つです。特定の要素の行間隔を決定するには、計算された行の高さから計算されたフォント サイズを引くだけです。この値は合計行間隔です。行間隔は負の値になる場合があります。行間を 2 で割って、半分の行間をコンテンツ領域の上下に適用します。結果は要素のインライン ボックスです。 ライン ボックス
特定のコンテンツ行に対してすべてのインライン ボックスが生成されると、これらのインライン ボックスは ライン ボックス の構築で考慮されます。 ライン ボックスは、最高位のインライン ボックスの上部と最低位のインライン ボックスを含むのに十分な高さです。 行の高さの値を指定します
line-height デフォルト値が標準の場合、ユーザーエージェントは行間の垂直方向のスペースを計算する必要があります。異なるユーザーエージェントによって計算される値は異なる場合がありますが、通常はフォントサイズの1.2倍であり、これによりラインボックスは指定された要素のフォントサイズ値よりも大きくなります。

行の高さと継承

ブロックレベルの要素が別の要素から行の高さを継承する場合、問題はさらに複雑になります。 line-height 値が親要素から継承される場合、子要素ではなく親要素から計算されます。

    body {font-size:10px;}    div {line-height:1em;}    p {font-size : 18px}    <div>        <p>            这段文字从div继承了line-height，div的字体大小时10，所以计算出来的大小是10px。        </p>    </div>

この問題を解決する 1 つの方法は、スケーリング係数を設定することです。スケーリング係数は、計算値ではなく継承値になります。この数値は要素とそのすべての子要素に適用されるため、各要素は独自のフォント サイズに基づいて行の高さを計算します。

すごいです

line-height はテキストの各行の上下に追加のスペースを均等に分配しているように見えますが、実際には、インライン要素のコンテンツ領域の上部と下部から一定量を追加 (または減算) します。インラインフレームを作成します。

テキストの垂直方向の配置

CSS では、vertical-align プロパティは、画像やフォーム入力要素などのインライン要素と置換要素にのみ適用されます。 vertical-align プロパティは継承できません。
vertical-align は 8 つのキーワード、パーセンテージ数値または長さの値のみを受け入れます。

ベースラインの位置合わせ
baseline では、要素のベースラインがその親要素のベースラインと位置合わせされる必要があります。画像入力ボックスなど、垂直方向に整列した要素にベースラインがない場合、要素の下端は親要素のベースラインに揃えられます。
この配置ルールは、行上に他のテキストがない場合でも、一部の Web ブラウザーが常にベースライン上に置換された要素の下端を配置するため、重要です。たとえば、表のセルに画像が 1 つだけあると仮定します。画像は実際にはベースライン上にある可能性がありますが、一部のブラウザでは、ベースラインの下のスペースにより画像の下にギャップが生じます。他のブラウザでは、表のセル内の画像が「しっかりとラップ」されるため、空白は存在しません。 上付き文字と下付き文字
vertical-align:sub 宣言により、要素は下付き文字になります。これは、そのベースライン (置換された要素の場合は下端) が親要素のベースラインに対して低くなることを意味します。仕様では要素が引き下げられる距離が定義されていないため、この距離はユーザー エージェントによって異なる場合があります。スーパーはサブよりもサブであり、親ベースラインと比較して上昇します。
sub および super は要素のフォント サイズを変更しません。デフォルトでは、下付き文字または上付き要素内のテキストはすべて、親要素内のテキストと同じサイズになります。 下揃え
bottom は、要素のインライン ボックスの下端をライン ボックスの下端に揃えます。
text-bottom はインラインテキストの下部を指します。この値は、置換要素やその他のタイプの非テキスト要素では無視されます。これらの要素 (置換要素または非テキスト要素) については、「デフォルト」テキスト ボックスが考慮されます。このデフォルトのボックスは、親要素のフォント サイズから派生します。整列する要素のインラインボックスの下端が、デフォルトのテキストボックスの下端に揃えられます。 上揃え
top は下と反対、text-top は text-bottom の反対 中央揃え
middle は、多くの場合 (常にではありませんが) 画像に適用されます。 middle は、インライン要素ボックスの中点を親要素のベースラインの 0.5ex 上の点に揃えます。1ex は親要素のフォント サイズを基準にして定義されます。ほとんどのユーザー エージェントは 1ex を 0.5em として扱うため、middle は要素の垂直方向の中点を親要素のベースラインから 0.25em 上の点に揃える傾向があります。ただし、ブラウザによっては正確な X 高さを計算するものもあります。 パーセンテージ
パーセンテージを使用すると、要素のベースライン (または置換要素の下端) が、親要素のベースラインに対して指定された量だけ上下します (指定したパーセンテージは、ラインのパーセンテージとして計算する必要があります) -要素の高さ。その親要素の行の高さを基準にしたものではありません)。プラスの場合は増加し、マイナスの場合は減少します。 長さの調整
調整前と比較して、指定された距離だけ要素を上下させます。垂直方向に配置されたテキストは別の行の一部になったり、他の行のテキストを覆ったりしないことに注意してください。垂直方向に整列したすべての要素は行の高さに影響します。ライン ボックスは、最も高いインライン ボックスの上部と最も低いインライン ボックスの下部を包含するのに十分な高さとして説明されることに注意してください。これには、垂直方向の配置によって上昇または下降するインライン ボックスが含まれます。