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

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

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

CSSコードコンテンツをクリップボードにコピー
  1. vertical-align : baselineベースライン(要素のベースラインは親要素のベースラインに揃えられます)
  2. vertical-align : sub (要素のベースラインを親要素の適切な下付き位置まで下げます)
  3. vertical-align : super (要素のベースラインを親要素の適切な上付き文字の位置まで上げます)
  4. vertical-align : bottom bottom (整列された子要素の下端を行ボックスの下端に揃えます)
  5. vertical-align : text-bottom (要素の下部を親要素のコンテンツ領域の下部に揃えます)
  6. vertical-align : top (整列された子要素の上端を行ボックスの上端に揃えます)
  7. vertical-align : text-top (要素の上部を親要素のコンテンツ領域の上部に揃えます)
  8. vertical-align : middle (要素の中心点は、親要素のベースラインに親要素の文字 X の高さの 1/2 を加えた位置に揃えられます)
  9. vertical-align : (+-n)px (要素はベースラインに対して上下に npx オフセットされます)
  10. vertical-align :x% (要素の行の高さの値に対する相対値)
  11. vertical-align :inherit (親要素からvertical-alignプロパティの値を継承します)

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

インラインブロックの下の隙間

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

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

[1]表示:ブロック

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

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

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

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

応用

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. div{
  2. 行の高さ: 100px;
  3. 幅: 100ピクセル;
  4. テキスト配置: 中央;
  5. 境界線: 1px 黒一色;
  6. }
  7.   
  8. <div>テストテキスト</div>   

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

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

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

  1. div{
  2. 行の高さ: 200px;
  3. テキスト配置: 中央;
  4. }
  5. 画像{
  6. 垂直位置合わせ: 中央;
  7. }
  8. <div>   
  9.      <画像 ソース= "#"  代替= "#" >   
  10. </div>   

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

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


コードをコピー
コードは次のとおりです。
//正しい 1<div> <img src="#" alt="#"></div>//正しい 2<div><img src="#" alt="#"><!-- ここで改行またはスペースが必要です--></div>//エラー<div><img src="#" alt="#"></div>

【3】画像が完全に垂直に中央揃えされている

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


コードをコピー
コードは次のとおりです。
div{ 行の高さ: 200px; テキストの位置揃え: 中央; フォントサイズ: 0;}img{ 垂直位置揃え: 中央;}

コードをコピー
コードは次のとおりです。
<div> <img src="#" alt="#"></div>

【4】複数行のテキストを水平・垂直に中央揃えする

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. div{
  2. 高さ: 100px;
  3. 幅: 200ピクセル;
  4. 背景色: ピンク;
  5. テキスト配置: 中央;
  6. }
  7. スパン{
  8. 表示:インラインブロック;
  9. 垂直位置合わせ: 中央;
  10. 行の高さ: 20px;
  11. 幅: 100ピクセル;
  12. }
  13. 私{
  14. 表示: インラインブロック;
  15. 高さ: 100%;
  16. 垂直位置合わせ: 中央;
  17. }

XML/HTML コードコンテンツをクリップボードにコピー
  1. <div>   
  2.         < i > </ i > < span >私はとても長い、とても長い、とても長い、とても長い複数行のテキストです</ span >   
  3.     </div>     

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

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

コードをコピー
コードは次のとおりです。
画像{ 垂直方向の位置: -5px;}

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

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

コードをコピー
コードは次のとおりです。
img{ 垂直方向の位置: テキスト下部;}

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

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

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

<<:  Vue の element-ui コンポーネントのデフォルトの CSS スタイルを変更する 4 つの方法

>>:  MySQLのFreeListメカニズムの詳細な説明

推薦する

MySQL シャーディング入門ガイド

序文リレーショナル データベースは、システムのボトルネックになる可能性が高くなります。単一のマシンの...

docker を使用して kafka プロジェクトをデプロイする Centos6 方法の分析

この記事では、Docker を使用して Centos6 に Kafka プロジェクトをデプロイする方...

Element における複数データ読み込み最適化の実装

目次シナリオコードの実装要約:シナリオ最近、ElementUI をベースにしたバックグラウンド管理シ...

win10にUbuntu18デュアルシステムをインストールするとmmx64.efiが見つからないという問題が発生する

Ubuntu 18のインストール中に、USBディスクからUbuntuのインストールを開始すると、mm...

AngularでTweenMaxアニメーションライブラリを使用する際の問題と解決策

最近何もすることがないのでCSSをいじっていますより良いアニメーションライブラリTweenMaxを見...

Linux RabbitMQ クラスタ構築プロセス図

1. 全体的な手順冒頭で、RabbitMQ サービスをインストールして実行する方法を紹介しましたが、...

この記事では、Vue 3.0 レスポンシブの使い方を説明します。

目次ユースケースリアクティブAPI関連プロセス反応的なcreateReactiveObjectはレス...

Dockerイメージ内のnoneイメージ操作を削除する

普段はdocker buildコマンドでイメージを生成していますが、コードの更新が頻繁に行われるとn...

JavaScript es6 における var、let、const の違いの詳細な説明

まず、よくある質問は、ECMAScript と JavaScript の関係は何ですか? ECMAS...

よく使われるCSSカプセル化方法の概要

1. pc-reset PCスタイルの初期化 /* 正規化.css */ html{ 行の高さ: 1...

HTML ページ ヘッダー コード例の詳細な説明

知識ポイント1: ヘッダー情報にWebページのベースURLを設定するベース URL の本質は、ハイパ...

CSS3 はドラッグ可能なルービックキューブの 3D 効果を実現します

主に使用される知識ポイント: •css3 3D変換 •ネイティブjsマウスドラッグイベント•表示:グ...

Ubuntu Server のターミナルのウェルカム メッセージで広告を無効にする方法

最新の Ubuntu Server バージョンを使用している場合、ようこそメッセージに、Ubuntu...

JavaScript でプライベート メンバーを作成する

目次1. クロージャを使用する2. ES6クラスを使用する3. ES2020提案を使用する4. We...

Vueのインストールと使用

目次1. Vueのインストール方法1: CDNの導入方法2: 直接ダウンロードしてインポートする方法...