CSSの行の高さについての深い理解-CSSチュートリアル-php.cn

構文:
line-height:normal | length
パラメータ:
normal: デフォルトの行の高さ
length: 浮動小数点数と単位識別子、負の値で構成される長さの値許可されています。パーセント値はフォントの高さのサイズに基づいています。「長さの単位」を参照してください。
説明:
オブジェクトの行の高さを取得または設定します。つまり、フォントの底部とフォントの内側の上部の間の距離です。行に複数のオブジェクトが含まれる場合、行の最大の高さが適用されます。現時点では、行の高さを負の値にすることはできません。
対応するスクリプト機能は lineHeight です。私が書いた他の本もご覧ください。
例:

div {line-height:6px; } div {line-height:10.5; }

ログイン後にコピー

CSS の行の高さと高さの違いは何ですか?

簡単に言えば、line-height は行の高さを意味し、height は要素自体の高さを定義します。

たとえば、次のコード

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

を定義すると、 test {line-height:20px;} の場合、この要素の実際の高さはコンテンツによって異なります。テキスト部分がブラウザで行として表示される場合、この div の実際の高さは 20px です。 2 行で表示される場合、div の実際の高さは 40 ピクセル、テキストの行の高さは 20 ピクセルになります。
.test{height:40px} を定義すると、この要素の実際の高さは通常は影響を受けません。テキストが 1 行で表示される場合、div の高さは 40 ピクセルのままですが、テキストの行の高さが div の高さの 20 ピクセル未満になると、コンテンツの量が変更されます。テキストコンテンツの高さが高さよりも小さいため、変更されません。ただし、テキストコンテンツの高さが 40 ピクセルを超える場合、一般的に、div の高さもそれに応じて増加します。

line-heightとline box height

Heightとline-heightはCSSの高さの役割を果たすべきですよね？ラベルが高さ
属性(高さのパーセンテージを含む) を定義していない場合、たとえ IE6 でのデフォルトの高さのバグが約 11 ピクセルであっても、最終的に表示される高さは line-height によって決定されなければなりません。ゆっくり教えてください。まず、誰もがよく知っている現象について話しましょう。

という空の div があります。高さの値が少なくとも 1 ピクセルより大きく設定されていない場合、 divは0になります。 div にスペースまたはテキストを入力すると、div に高さが設定されます。では、なぜ div にテキストが入った後に高さが存在するのか考えたことはありますか?

これは一見単純な質問ですが、行の高さを理解する上で非常に重要な質問です。言葉が心を開いているからだと思う人もいるかもしれません。テキストはスペースを占有し、自然に div を引き伸ばします。最初はこのように理解していましたが、実際には、インラインモデルを深く理解した後、div の高さを拡張するのはテキストではなく、行の高さであることがわかりました。

line-height に関する注意事項1. line-height の使用はテキストに対してのみ機能し、画像に対しては機能しません

2. リアルタイムの行の高さの効果を確認するには、dreamweaver を使用します3. value 負の値は使用できません。使用した場合は無効となります。各ブラウザで line-height の解決方法に微妙な違いがある場合、上下で 1px の差が生じます。行の高さは偶数ですが、ブラウザのほとんどの解釈は奇数の場合でも、一部のブラウザでは上部よりも下部が 1 ピクセル大きくなりますが、一部の Web サイトでは下部が上部より 1 ピクセル大きくなります。要件が厳しいため、線の高さを設計するときは偶数を使用することをお勧めします

以上がCSSの行の高さについての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。