行の高さと垂直方向の配置に関する包括的な理解

line-height、font-size、vertical-align は、インライン要素のレイアウトを設定するための重要な属性です。これら 3 つのプロパティは相互に依存しています。行間の距離を変更したり、垂直方向の配置を設定したりするには、これらの連携が必要です。 font-size の関連内容については、CSS フォントで詳しく紹介されています。この記事では、主に line-height と vertical-align を紹介します。

行の高さ

意味

行の高さ 行の高さは、テキスト行のベースライン間の距離を指します。実際には、line-height はインライン要素とその他のインライン コンテンツにのみ影響し、ブロック レベル要素には直接影響しません。ブロック レベル要素に line-height を設定することもできますが、この値はブロック レベル要素のインライン コンテンツに適用された場合にのみ効果があります。ブロックレベル要素で line-height を宣言すると、そのブロックレベル要素のコンテンツの最小の行ボックスの高さが設定されます。

値: <長さ> | <パーセンテージ> | <数値> | 通常 | 継承

初期値: 通常

適用対象: すべての要素

継承: はい

パーセンテージ: 要素のフォントサイズに対する相対値

line-height を深く理解するには、行ボックスの構築に関する一般的な用語を理解する必要があります。

コンテンツエリア

インラインの非置換要素または匿名テキストの一部の場合、font-size と font-family によってコンテンツ領域の高さが決まります。 Songtiの場合、インライン要素のフォントサイズが15pxの場合、コンテンツ領域の高さは15pxになります。他のフォントの場合、コンテンツ領域の高さはフォントサイズと等しくありません。

インラインボックス

コンテンツ領域と行間隔を足したものがインライン ボックスになります。インラインの非置換要素のフォント サイズが 15 ピクセルで、行の高さが 21 ピクセルの場合、差は 6 ピクセルになります。ユーザーエージェントはこれらの 6 ピクセルを半分に分割し、その半分をコンテンツ領域の上部と下部に適用して、インライン ボックスを作成します。

行の高さがフォントサイズより小さい場合、インラインボックスは実際にはコンテンツ領域より小さくなります。

ラインボックス

行ボックスは、行内の最も高いインライン ボックスの上部から最も低いインライン ボックスの下部までの距離として定義され、各行ボックスの上部は前の行の行ボックスの下部に接します。

ボックスのプロパティ

パディング、マージン、境界線は行ボックスの高さには影響しません。つまり、行の高さには影響しません。

インライン要素の境界は、line-heightではなくfont-sizeによって制御されます。

インラインの非置換要素の上部と下部には余白は適用されません。

margin-left、padding-left、border-leftは要素の先頭に適用され、margin-right、padding-right、border-rightは要素の末尾に適用されます。

インライン置換要素には、要素が垂直に揃えられたときに正しく配置されるように、行の高さの値が必要です。 vertical-align のパーセンテージ値は、要素の行の高さを基準に計算されるためです。垂直方向の配置では、画像自体の高さは重要ではなく、line-heightの値の方が重要です。

デフォルトでは、インライン置換要素はベースライン上に配置されます。置き換えられた要素に下部パディング、マージン、または境界線を追加すると、コンテンツ領域が上に移動します。置換された要素のベースラインは、通常フローの最後の行ボックスのベースラインになります。ただし、置換要素が空であるか、そのオーバーフロー属性値が表示されていない場合は、ベースラインはマージンの下端になります。

垂直方向の配置

意味

vertical-align は垂直方向の配置を設定するために使用されます。垂直方向に揃えられたすべての要素は行の高さに影響します。

値: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <percentage> | inherit

初期値: ベースライン

適用対象: インライン要素、置換要素、表のセル

継承: いいえ

パーセンテージ: 要素の行の高さに対する相対値

[注意] IE7ブラウザのvertical-alignのパーセンテージ値は小数行の高さをサポートしておらず、baseline、middle、text-bottomなどの値を使用した場合の表示効果は標準ブラウザとは異なります。一般的な解決策は、インライン要素を表示するように設定することです：inline-block

[注] <sub>と<sup>はデフォルトでvertical-align:sub/superスタイルを持ちます。

インラインブロック要素がブロックレベル要素に隙間を残す理由は、画像のデフォルトの垂直配置がベースライン配置であるためです（ベースライン配置は、原則として、画像の下端を匿名テキストの大文字Xの下端に揃えます）。匿名テキストには行の高さがあり、Xの下端は行ボックスから少し離れており、この距離が画像によって残される隙間です。

したがって、この問題にはいくつかの解決策があります。

[1]表示:ブロック

垂直配置は置換要素とインライン要素にのみ適用できるため、ブロックレベル要素に変更すると垂直配置が無効になります。

[2] 親要素の行の高さ: 0

これにより、匿名テキストと行ボックス間の距離がゼロになります。

[3]垂直位置合わせ: 上/中央/下

応用

【1】1行のテキストを水平方向と垂直方向に中央揃えにする

[注意] テキスト行を垂直方向に中央揃えするには、高さと行の高さを同じ値に設定する必要があるとよく言われますが、実際には高さを設定する必要はありません。行の高さを設定するだけで、行内のテキストが垂直方向に中央揃えされます。

【2】画像はほぼ垂直方向に中央に配置されています

XML/HTML コードコンテンツをクリップボードにコピー

文字 X が em ボックス内で垂直方向に中央揃えされておらず、異なるフォントでの文字 X の高さの位置が一貫していないためです。フォントサイズが大きいほど、この違いはより顕著になります

[注意] IE7 ブラウザでインライン要素を含むブロックレベル要素を記述する場合は、1 行で記述するのではなく、改行して記述する必要があります。

方法 2 に基づいて、ブロックレベル要素のフォント サイズを 0 に設定すると、画像を完全に垂直方向に中央揃えにすることができます。

フォント サイズを 0 に設定する方法 3 の制限により、テキストをブロック レベル要素内に配置することはできません。方法 4 は、主に新しい要素を追加することで垂直方向の中央揃え効果を実現します。この方法は、画像を水平方向と垂直方向に中央揃えするためにも使用できます。

【5】アイコンとテキストの配置

<方法1> 負の長さを使用する

実際の経験によれば、20×20ピクセルのアイコンに14ピクセルのテキストを並べると、vertical-alignを-5pxに設定すると、より良い配置効果が得られます。

<方法2> テキストの下揃えを使用する

ベースラインを使用するとアイコンが上に移動します。top/bottom を使用すると他のインライン要素の影響を受け、位置ずれが発生します。middle を使用すると適切なフォント サイズが必要になり、互換性が低くなります。text-bottom を使用するとより適切で、行の高さや他のインライン要素の影響を受けません。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。

原文: http://www.cnblogs.com/xiaohuochai/p/5271217.html