垂直方向に整列すると周囲の要素に影響を与えるように見えるのはなぜですか?

垂直位置合わせの影響: 位置合わせ動作を理解する

垂直位置合わせを にのみ適用するシナリオを考えてみましょう。要素。驚くべきことに、 だけではありません。コンテンツは表示されますが、周囲の要素全体が垂直方向に整列して表示されます。なぜこのようなことが起こるのでしょうか?

この動作は、まさにvertical-alignの意図された機能です。要素の垂直方向の配置を指定すると、その親コン​​テナ内でのコンテンツの配置が示されます。あなたの場合、

の直系の子孫です。

vertical-align プロパティが に適用されると、ブラウザは の垂直位置を計算します。のコンテンツは、その親のコンテンツに相対します。

要素には 50 ピクセルの高さが割り当てられ、高さにも 50px が与えられます。その後、ブラウザは コンテンツは

の中央に配置する必要があります。コンテンツ、全体の

が生成されます。

垂直方向の配置は、要素自体とその要素内のコンテンツに影響を与えることに注意することが重要です。ただし、周囲の要素の垂直方向の配置は直接変更されません。

この例では、

要素の背景色が を超えて垂直方向に広がっているように見え、

全体が重なっているように見えます。縦に並んでいます。ただし、 はコンテンツはまだ

の中央に配置されています。

誤解が生じるのは、私たちが の垂直方向の整列による目に見える効果に注目する傾向があるためです。 を揃えていると仮定して、コンテンツを作成します。要素自体。ただし、vertical-align は主に 内のコンテンツの配置に影響します。

以上が垂直方向に整列すると周囲の要素に影響を与えるように見えるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。