「vertical-align」がターゲットのインラインブロック要素だけでなく兄弟要素にも影響を与えるのはなぜですか?

自己ではなく垂直方向に整列された兄弟

垂直方向の整列を理解することは、予想されるほど簡単ではありません。例で示すように、予期せぬことに、inline-block にのみvertical-align を適用すると、 を除く他のすべてを垂直方向に揃えます。コンテンツそのもの。これは意図された動作ですか?

予想どおり、vertical-align は親コンテナ内の要素の垂直方向の配置を定義します。 だけが機能するという予想に反して、コンテンツが整列されると、ブラウザは p 親と 内のテキストを含むすべての要素を整列させます。

にvertical-align: middle を適用すると、ブラウザーによって同じ高さでレンダリングされます。 p 内のすべての要素の垂直方向の配置を変更します。 p 自体が の高さの中点と垂直方向に整列され、 内のテキストが垂直方向に配置されます。は上端に揃えられたままで、垂直方向に揃っていないように見えます。

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