CSS行高line-height_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS行高line-height_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:19:07

オリジナル

1495 人が閲覧しました

遭遇した問題: CSS で、line-height: 1 と line-height: 1px の違いがわかりません

発見の過程: 最近、ウェブサイトで、テキスト間の行の高さには Line-height を使用する必要があります。以下に示すように、この問題が見つかりました。 height 属性は行間の距離（行の高さ）を設定します。負の値は使用できません。このプロパティは、ラインボックスのレイアウトに影響します。ブロックレベルの要素に適用すると、その要素内のベースライン間の最大距離ではなく、最小距離が定義されます。計算された line-height と font-size (行間隔) の差は 2 つの半分に分割され、テキスト行の上部と下部に追加されます。このコンテンツを含めることができる最小のボックスはラインボックスです。デフォルトでは、適切な行間隔を設定します。

number

行間隔を設定するために、現在のフォントサイズを乗じる数値を設定します。倍数に相当します

length

固定行間隔を設定します。現在のフォントサイズに基づくパーセントの行間隔。 line-height 属性の値を親要素から継承することを指定します。

inherit

< ;pstyle="font-size: 30px;">123

px*1、つまり、行間隔はフォントサイズ 30px と同じです。

このときの結果は以下の通りです:

2.line-height: 1px

例:

＆lt;/div＆gt; 。結果は以下のようになります。

3.line-height: 100% 行の高さは継承可能ですが、親要素の行の高さの単純なコピーではなく、計算された値が継承されます。

例:

123

一般的な考え方によると, line-heightは継承できるので、p要素の行の高さを100%にすることもできますが、結果はこのようになりません。これは継承計算の結果です。親要素の line-height に単位 (px,%) がある場合、継承される値は変換後の特定の px レベルの値になります。この例では、10px*100 になります。 %=10px 、フォントサイズは 30px であるため、オーバーラップが発生します。

属性値に単位がない場合、ブラウザは計算された特定の値ではなく、この「係数 (値)」を直接継承します。このとき、その行の高さは独自の font-size 値に基づいて再計算されます。例 2 に示すように、新しい行の高さの値を取得します。

4.line-height:normal

normal はデフォルト値です。ほとんどのブラウザ (Georgia フォントの下) は font-size の値 1.14 を計算します。 1.14 倍 font-size が設定されていない場合は、基本値 16px の 1.14 倍になります。通常はフォントの違いにより特定の値とは異なるため、この値だけを議論することは無意味です。プロジェクトで必要な場合は、値を指定することをお勧めします。

参考文献:

[1] "CSS line-height"、(2013/8/4)

[2] Danilo、https://www.zhihu.com/question/21786347/answer /19349031、(2013/10/12)