「vertical-align」がターゲットの要素以上に影響を与えるのはなぜですか?

垂直方向の配置: 予期せぬことを理解する

垂直方向の配置の機能を調べていると、奇妙な現象に遭遇します。理論的には、 などのインライン要素にvertical-align を適用すると、その要素のみが位置合わせされるはずです。ただし、実際には、含まれている

などの他の要素も垂直方向に整列しているように見えることが観察されます。この動作は確かに予想された結果です。垂直配置は、ライン ボックス内の要素の配置を指定します。特定の要素に適用すると、その要素のコンテンツの位置を調整するだけでなく、行全体の全体的な配置に影響します。

垂直配置メカニズム

vertical-align を指定しないと、要素はベースラインによって整列されます。垂直配置が導入されると、行ボックス内に新しい基準線が確立されます。整列されていない要素はこの基準線に整列しますが、整列された要素はその上または下のいずれかに配置されます。

提供された例では、

の

<スパン>

vertical-align が に適用されると、その高さの中央に新しい基準線が確立されます。

のテキストは、基準線よりも低い独自のベースラインに合わせて配置されたままになります。その結果、テキストは

のテキストの下に表示されます。結論このシナリオで観察された予期しない配置はバグではありませんむしろ、垂直配置の意図された効果です。行ボックス内に基準線を確立することにより、vertical-align は、明示的に指定されていない要素も含め、その行内のすべての要素が互いに垂直方向に整列することを保証します。

以上が「vertical-align」がターゲットの要素以上に影響を与えるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。