CSSの高さと行の高さの違い

この記事ではCSSにおける高さとline-heightの違いを主に紹介していますので、必要な方は参考にしてください。 line-height: 行の高さはテキスト間の上下の距離を設定します。 Height: 高さはレイヤーなどの高さを定義します。つまり、line-height は 1 つの行の高さを指します。テキストを拡大した後、すべての要素の高さが重なりますか?


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

フォントを拡大し、要素の行の高さが設定されていない(親要素から継承
し、親要素が固定値である)場合、またはその値が固定値である場合、テキストが行の高さを超えます範囲と重複。
line-height は属性を継承しているため、テキスト部分の line-height を、フォントの高さ * 1.5 の高さである 1.5 に設定するのが最適です。

このようにして、行の高さは次のようになります。フォントのスケーリングに合わせてスケールします。
テキストと画像を行内の中央に配置するにはどうすればよいですか?


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

読みやすくするにはどうすればよいですか? インラインテキストの背景色 #fff、テキストの色 #333; 圧迫感を軽減するためにテキストの行高さ 1.25 ～ 1.5 のスペースがあります。メインのテキストのサイズは 14 ピクセルで、その他は 12 ピクセルです。

入力ボタンはブラウザ間で同じように動作します。
Firefox のデフォルトの linde-height 値はデフォルトで標準になっており、明示的に指定する必要があります。
コードは次のとおりです:

button, input[type="button"], input[type="submit"] {
line-height:normal ! important
}

input.button, a.button,ボタン {

フォント: 太字 12px Arial、Helvetica、サンセリフ

パディング
: 5px 8px;

;

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