line-height と height の違いの詳細な例

line-height: 行の高さはテキスト間の上下の距離を設定します
height: height はレイヤーなどの高さを定義します

言い換えると、line-height は特に 1 行の高さを指し、高さは高さを指しますすべての要素の高さにすることができます

テキストを拡大した後、端は重なりますか?

行の高さは、テキストの高さにテキストの上下の空白領域を加えたものとして直接理解できます。単位が固定されている場合、行の高さは一定の値になります。 。

フォントを拡大し、要素の行の高さが設定されていない（親要素から継承され、親要素が固定値である）場合、またはその値が固定値である場合、テキストは行の高さの範囲を超えてしまい、重なり合う。

line-height は属性を継承しているため、テキスト部分の line-height を 1.5 (フォントの高さ * 1.5) に設定するのが最適です。

このようにして、行の高さは次のようになります。フォントのスケーリングに合わせてスケールします。

テキストと画像を行内の中央に配置するように設定するにはどうすればよいですか?

line-height のデフォルトはベースラインです。vertical-align:middle を使用してテキストと画像を中央揃えにすることができます。

読みやすくするにはどうすればよいですか？

インラインテキストの背景色 #fff、テキストの色 #333; 圧迫感を軽減するために、テキストの周囲に空白行の高さが 14px あり、残りは 12px です。

入力ボタンはブラウザ間で同じように動作します。

Firefox のデフォルトの linde-height 値はデフォルトで標準になっており、明示的に指定する必要があります。

りー

以上がline-height と height の違いの詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。