子要素の垂直方向の配置が CSS の親の配置に影響するのはなぜですか?

CSS での垂直方向の配置動作

vertical-align プロパティを使用する場合、それを 1 つの要素に適用すると予期せぬ影響を受ける可能性があります。近くの他の要素の位置合わせ。これは必ずしもバグやエラーではなく、プロパティの動作の結果です。

CSS では、vertical-align は周囲の要素に対する要素の垂直方向の配置を定義します。 のようなインライン要素に適用すると、その親要素 (通常は

のようなブロックレベルの要素) 内で要素が垂直方向に整列されます。

この例では、 は

です。要素の垂直位置揃えの値は middle で、親

内で垂直方向の中央に配置する必要があることを示します。要素。ただし、 以降は要素の高さが定義されている場合、その要素は

内でその要素に割り当てられたスペース全体を占有し、親要素を効果的に押し下げます。

親

要素には黄色の背景があり、 が占めるスペースを埋めるように拡張されます。

以来はブロックレベルの要素であり、 に合わせて高さを調整します。

したがって、予期しない結果は、 ではありません。コンテンツは垂直方向に整列されず、

全体が垂直方向に整列されます。 に垂直方向の位置合わせが適用されているため、要素は位置合わせされます。子供。これは、指定されたコンテキストでのvertical-alignの予期される動作です。

以上が子要素の垂直方向の配置が CSS の親の配置に影響するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css Error using Property this background bug Other

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。