【勉強ノート】cssのline-height_html/css_WEB-ITnose

記事を書いてからほぼ10日が経ちました 週に1記事書くのはなかなか大変です… 本当は前回の事件（前編）の続きをして事件の種類をまとめたかったのですが、読んでみて。 、まだ整理が面倒なので後回しにしていたのですが、まだ何も書いていないんです…もう先延ばしにすることができないので、今日は line-height 属性について簡単に説明します。私たちがよく使っているものの、必ずしも理解しているわけではない CSS です。

基本概念

行の高さ、行間隔

行の高さは、テキスト行のベースライン間の垂直距離を指します。では、ベースラインとは何でしょうか? vertical-align 属性にはベースライン値があり、このベースラインがベースラインであることを覚えていますか。この「盗まれた写真」（以下の参考記事から選択）を見てください、実際に修正しました〜

注: 最後から 2 行目はベースラインであり、一番下の行は最後の行であり、最後の行ではありません。ベースライン。

画像内の 2 本の赤い線の間の距離は line-height (line-height)、前の行の一番下の行と次の行の一番上の行の間の距離は 行間隔、同じ行の一番上の行と一番下の行の距離 距離はfont-sizeの大きさ、行間の半分はhalf line spacing の関係。 line-height は、画像の右下隅で一目でわかります~

半行距 = （line-height - font-size）/2

もちろん、半行間隔です。負の値でも構いません (line-height

4種類のボックス

ここで挙げる4種類のボックスは、インラインボックス、ラインボックス、コンテンツエリア、包含ボックス ~

• インラインボックス(インラインボックス)です。
  各インライン要素はインライン ボックスを生成します。インライン ボックスはブラウザーのレンダリング モデルの概念であり、インライン ボックスの高さは font-size と同じになります。インラインボックスは変更されませんが、行間隔 が変更されます。

• ラインボックス(line box)

  ラインボックスとは、このライン内のインラインボックスで構成される、このラインの仮想的な長方形のボックスを指します。ライン ボックスもブラウザのレンダリング モードの概念であり、表示できません。
  行ボックスの高さは、この行のすべてのインライン ボックスの高さの最大値と等しくなります。 コンテンツが複数行ある場合、各行には独自の行ボックスがあります。

• コンテンツエリア (コンテンツエリア)

  コンテンツエリアはテキストを囲むボックスであり、その高さはフォントサイズとパディングによって異なります。
  個人的な意見: コンテンツ領域の高さ = font-size + padding-top + padding-bottom。これは検証する必要があります。また、友達からの回答も楽しみにしています~

• 入っているボックス

  入っている箱は、上記の3種類の箱を包んだ箱です 箱は少し複雑です〜写真を見てください
  

私の画力が限られていて申し訳ありませんが、注意して見るとまだわかります〜 ^ _^

値

通常の状況では、ブラウザのデフォルトの行の高さは 1.2 です。 line-height をカスタマイズしてこの初期値を上書きすることができます。では、line-height を設定するにはどうすればよいでしょうか?

valuedescriptionnormalDefault の 5 つの方法があります。適切な行間を設定します。 number この数値に現在のフォント サイズを乗算して行間隔を設定します。つまり、数値は現在のフォント サイズの倍数になります。 長さ固定行間隔を設定します。 % 現在のフォント サイズに基づくパーセントの行間隔。 inherit line-height 属性の値を親要素から継承することを指定します。

とても簡単そうに見えます~ ただし、line-height は inheritable 属性であり、その継承ルールは少し複雑です...

継承

事前に説明する必要があります: line-height のサイズは厳密に異なりますfont-size に関連して、行の高さの px を指定することを除いて、残りの設定メソッドは font-size に基づいて計算されます。
一つずつ説明していきます~

• inherit

  これについては、実際には、親要素の line-height の値を継承するので、親要素の値が何であれ、それについては何も言うことはありません。
  子孫要素が line-height を設定しない場合も、この値になります。
  

• length

  line-height が 20px に設定されているとすると、この行の行の高さは 20px となり、font-size とは関係がなく、font-size に応じて拡大縮小されません。
  この長さの値 (20px) は子孫要素によって継承され、子孫要素が line-height を設定しない限り、すべての子孫要素は同じ継承された line-height (20px) を使用します。
  

• パーセンテージ

  font-size が 16px で、line-height が 120% に設定されていると仮定します。その行の高さは、16 * 120% = 19.2px となります。つまり、行の高さは独自のフォント サイズに基づいて計算されます。
  子要素は親要素の行の高さを継承します。では、パーセント (120%) は何を継承するのでしょうか?それとも19.2px？
  答えは後者の 19.2px で、これは親要素の行の高さを計算した後の最終値です。
  

• normal

  line-height がnormal に設定されている場合、行の高さはブラウザの解析に依存し、通常は 1.2 です。
  前のものとは異なり、line-height が標準に設定されている要素の場合、その子要素はその line-height の計算された最終値を継承せず、子要素自体の font-size に基づいて計算されます。以下の表を参照してください~
  
  

elementfont-sizeline-height計算されたlline-heightbody h1 子要素が、それ自身の font-size のサイズに応じて拡大縮小されることがわかります。

16px	normal	16ピクセル * 1.2 = 19.2ピクセル
32px	normal	32px * 1.2 = 38.4px

純粋な数値

通常の柔軟性が必要でありながら、カスタム値も設定したい場合は、

純粋な数値
~ 純粋な数値と通常の数値の唯一の違いは、数値のサイズです。任意に設定され、normal の値はブラウザによって決定されます。

elementbodyh1 その子孫要素はこの値 (1.5 など) を継承し、独自のフォント サイズに基づいて独自の行の高さを計算します。

font-size	line-height	計算されたlline-height
16px	1.5	1 * 1.5 = 24 ピクセル
32 ピクセル	1.5	32px * 1.5 = 48px

をまとめると以下の通りです。

設定方法inheritlength% 120% ではなく、親要素の計算された行の高さの値 19.2px を継承しますnormal1.2Self font-size (16px) * 1.2 = 19.2 px1.2を継承、行の高さ = 独自のフォントサイズ(32px) * 1.2 = 38.4px1.5 一般的に、行の高さの値を 純粋な数値

line-height	計算されたline-height	子要素に継承されるline-height
行の高さの値親要素	計算する必要はありません	親要素の行の高さの値
20px	計算する必要はありません	20px
120 %	セルフフォント- size (16px) * 120% = 19.2px
			純粋な数値
独自のフォントサイズ(16px) * 1.2 = 19.2px	継承1.5、 line-height = 独自のフォントサイズ (32px) * 1.5 = 48px		それでは、どれが最良の方法でしょうか?

に設定することが最も推奨される方法です。これは、対応するフォント サイズに応じて拡大縮小されるためです。

これは line-height の概要です。お友達の投稿も大歓迎です~ リファレンス

MDN line-height

css の Line Height プロパティについて詳しく学びましょう

CSS line-height??line-height