よく使われる CSS テクニックの理由 (2) 理解していること line-height_html/css_WEB-ITnose

使用する基本的な用語と概念:

置換要素: 他のコンテンツのプレースホルダーとして使用される要素、またはコンテンツがドキュメント コンテンツによって直接表されない置換要素。たとえば、img 要素はドキュメント自体の外部の画像に置き換えられ、input 要素はラジオ ボタン、チェック ボックス、テキスト入力ボックスなどに置き換えられます。置換要素は主に行レベルの要素であり、行レベルの置換要素はブロックレベルの要素と同様に幅/高さ/パディング/マージンを設定できます。

非置換要素: 要素自体のコンテンツがドキュメントに含まれるか、そのコンテンツがユーザー エージェントによって要素自体によって生成されるボックスに表示されます。たとえば、段落 p 要素内のテキストは要素内に配置されます。

1. ブロックレベルの置換不可能な要素: div、p、blockquote など。
2. 行レベルの非置換要素:span、i など。行レベルの非置換要素では、width、height、marginTop、marginBottom を設定できないことに注意してください (理由は後で説明します)。

Em ボックス: 一般的に使用される font-size 属性と、表示される実際のフォント サイズとの関係は、次の青いボックスのように、フォントの設計者によって決定されます。したがって、 font-size の役割は、特定のフォントの em ボックスのサイズを提供することです (ただし、実際に表示される文字がこのサイズであるという保証はありません。実際の文字は em ボックスよりも高いか低い可能性があります)

コンテンツエリア:

非置換要素では、コンテンツエリアは、要素内の各文字の em ボックスをつなぎ合わせて形成されるボックスです。

1. 置換要素では、コンテンツ領域は、要素の固有の高さ + 可能な内部マージン + 境界線 + 外部マージンになります。たとえば、下の図の画像にパディング、境界線、およびマージンがある場合です。

行間: フォントサイズの値と行の高さの値の差です。この違いは実際には 2 つの半分に分割され、半行間隔と呼ばれるコンテンツ領域の上部と下部に適用されます。行間隔は、非置換要素にのみ使用できます。はい、一番上の行と一番下の行がボックスのコンテンツ領域を構成します。

インラインボックス: このボックスは、コンテンツ領域に行間隔を追加することで説明されます。

非置換要素のインライン ボックスの高さは、上の図の行の高さである line-height とまったく同じです。

置換要素には行間隔がないため、置換要素のインラインボックスの高さはそのコンテンツ領域の高さになります。

1. ライン ボックス: 行内の各文字には独自のインライン ボックスがあります。ライン ボックスは、行内に表示されるインライン ボックスの最高点と最低点を含む最小のボックスです。ライン ボックスの境界は、最上位のライン内にあり、ボックスの上端とライン ボックスの下端は、最下位のインライン ボックスの下端に配置する必要があります。
2. 知っておくべきナレーション:

コンテンツ領域は、ブロックレベル要素のボックスモデルのコンテンツボックスコンテンツに似ています。

インライン要素の背景は、コンテンツ領域とすべてのパディングと境界線に適用されます。

インライン要素の境界線は、コンテンツ領域とその内部および外部のすべての余白を囲む必要があります。

要素の内側と外側のマージンと境界線を置き換えると、要素のインライン ボックスの高さに影響し、それに応じてライン ボックスの高さにも影響します。これは img 要素で考えることができます。

非置換要素の内側と外側のマージンと境界線は、インライン要素またはその生成要素に対して垂直方向の影響を及ぼしません (つまり、有名なマージンの重複問題)。

これが本題への到達方法です:

パート 1: 行レベルの非置換要素 (span など) に margin-top と margin-bottom を設定するのはなぜ無駄なのでしょうか?

span はブロックレベルの要素ではないため、margin-top と margin-bottom を設定するのは無駄だと言うかもしれません。では、span を margin-left と margin-right で設定するとなぜ機能するのかを尋ねます。これらは両方とも margin です。 . 同じクラン出身ですか？わかりませんので、本当の理由はそれほど単純ではありません。私は行の高さの観点から分析しましたが、完全に正しいわけではないかもしれませんが、CSS の内部レンダリングメカニズムが何であるか、または w3c がなぜこのように規定しているのかは誰にもわかりません...

まず第一に、行を知る必要があります。フレーム (平たく言えば、これが行の高さの由来です。インライン フレームによって決まりますか? 行レベルの非置換要素である spam のインライン フレームは、そのコンテンツ領域 (つまり、その em フレーム) です。 、平たく言えば、フォント サイズ) + 上下の行間隔です。上で述べたように、コンテンツ領域は、ブロック レベル要素のボックス モデルのコンテンツ ボックス コンテンツに似ています。border-top、border-bottom を設定した場合でも、margin-top と margin-bottom を自由に設定できます。 、padding-top、padding-bottom はいずれも行の高さには役に立ちません。スパンの場合、行の高さは em ボックスと上の行と下の行の間隔に関係します。ボックスモデルがドキュメントフロー内で要素が占める位置を反映するための必須条件ではない場合、結局のところ、行の高さはドキュメントフロー内で要素が占める高さも反映することになります。 img 置換要素と同様に、span 要素のコンテンツ領域に境界線と内部および外部のスペースが含まれる場合、要素の行の高さに実際に影響します。

パート 2: line-height を使用すると、テキストまたはサブ要素のテキストが垂直方向に中央揃えになるのはなぜですか?

れーい

span要素にはpaddingとborderが設定されていないため、黄色の部分がこの時のspan要素のコンテンツ領域になります このときspan要素が継承するfont-sizeは16px（デフォルトのfont-size）です。 Chrome 上の HTML のサイズは 16px) を追加 コンテンツ領域の上下の行間隔により、span 要素の行の高さが親要素を埋め、テキストが中央に配置されます。親要素のコンテンツの高さは 50px なので、span 要素の line-height を直接 50px に設定すれば完了です。これは、span 要素が中央に配置されることを意味すると誤解している人が多いですが、実際にはそうではなく、span 要素は移動しません。その行の高さは増加します。

参考: 一部の概念は「CSS 権威ガイド」から参照していますが、そのほとんどは私自身が理解しているものです。間違っている場合は、すぐに修正できるようにご指摘ください。