空のインライン ブロック スパンがコンテナ内で垂直方向にずれるのはなぜですか?

インライン ブロック要素の垂直方向の配置の問題

特定の CSS シナリオでは、インライン ブロック要素で垂直方向の配置の不一致が発生する場合があります。この質問では、インライン ブロック コンテナ内の空のスパンがその兄弟要素と垂直方向に整列しないという特定の問題について調査します。

この不整列の理由は、インライン ブロック要素のデフォルトの垂直方向の整列プロパティ値に起因します。 、これは「ベースライン」です。この値は、要素のベースラインをその親コン​​テナのベースラインに合わせます。ただし、インライン ブロック要素にテキストが含まれていない場合、ベースラインがないため、要素は親の下マージン端に位置合わせされます。

この位置ずれを修正するには、次の手順を実行します。垂直方向の整列プロパティを「top」に設定します。これにより、要素が親の上部に強制的に揃えられ、垂直方向の一貫性が確保されます。さらに、空のスパンにテキストを追加すると、適切なベースラインが確立され、そのベースラインに基づいて両方の要素が位置合わせされます。

vertical-align プロパティを変更すると、スコープ内のすべての inline-block 要素に影響することに注意することが重要です。スタイル宣言。したがって、影響を受けるすべての要素にわたって望ましい位置合わせが確実に達成されるように、慎重に検討する必要があります。

以上が空のインライン ブロック スパンがコンテナ内で垂直方向にずれるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。