ラインハイイトと垂直整列の包括的な理解

ラインハイイト、フォントサイズ、および垂直アリグインは、ライン内の要素のレイアウトを設定するための重要な属性です。これらの3つの属性は相互依存関係の関係であり、行間の距離を変更して垂直方向のアライメントを設定するには、共同の努力が必要です。フォントサイズの関連コンテンツは、CSSフォントで詳細に導入されています。この記事では、主にラインハイイトと垂直整列を紹介します。

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

値：<length> | <パーセンテージ> | <number> |通常|継承

初期値：通常

適用：すべての要素

継承：はい

パーセンテージ：要素に対するフォントサイズ

ラインハイトを深く理解するには、ラインハイイトに関する一般的な用語を理解する必要があります。

非代替要素またはライン内の匿名テキストの一部の場合、フォントサイズとフォントファミリーがコンテンツ領域の高さを決定します。 Song Fontでは、要素のフォントサイズが連続して15pxの場合、コンテンツ領域の高さは15pxです。他のフォントでは、コンテンツ領域の高さはフォントサイズに等しくありません。

コンテンツ領域とライン間隔は、ラインインラインボックスに等しくなります。連続した非代替要素のフォントサイズが15pxで、ライン高さが21pxの場合、差は6pxです。ユーザーエージェントはこれらの6ピクセルを2つに分割し、それぞれコンテンツ領域の上部と下部に半分を適用します。

ラインハイトがフォントサイズよりも少ない場合、ラインインラインボックスは実際にはコンテンツ領域よりも少ない

行ボックスは、行の最上部の行の内側ボックスの上部と最下の行の内側ボックスの底部との間の距離として定義され、各行の上部は前の行ボックスの下部の隣にあります。

内側の縁、外側の縁、境界は、ラインフレームの高さに影響しません。つまり、ラインの高さには影響しません。

インライン要素の境界境界は、ラインハイイトの代わりにフォントサイズによって制御されます

マージンは、行の非代替要素の上部と下部には適用されません

マージン左、パディング左、国境左は、要素の始まりに適用されます。マージン右、パディング右、境界右

行内の要素を置き換えるには、垂直方向に整列したときに要素を正しく配置するために、ラインハイイト値を使用する必要があります。なぜなら、垂直アライインの割合値は、要素のライン高さに対して計算されるためです。垂直方向のアライメントの場合、画像自体の高さは無関係です。キーはラインハイトの値です

デフォルトでは、インライン交換要素はベースラインにあります。交換要素に内側の縁、外縁、または境界線を追加すると、コンテンツ領域が上昇します。交換要素のベースラインは、通常のストリームの最後の行ボックスのベースラインです。交換要素の内容が空であるか、オーバーフロー属性自体の値が見えない場合を除き、この場合、ベースラインはマージンボトムエッジです

垂直整列は、垂直アライメントを設定するために使用され、垂直に整列したすべての要素は行の高さに影響します。

値：ベースライン| sub |スーパー|トップ|テキストトップ|中央|下|テキストボトム| <length> | <パーセンテージ> |継承

初期値：ベースライン

適用：インライン要素、交換要素、テーブルセル

継承：なし

パーセンテージ：要素ライン高さに対するラインハイト

[注] IE7-ブラウザーの垂直アライメントのパーセンテージ値は小数の列高さをサポートしておらず、ディスプレイ効果はベースライン、中央、テキストボトムなどを取得する場合の標準ブラウザの効果とは異なります。