インラインブロック要素が垂直方向にずれるのはなぜですか?それを修正するにはどうすればよいですか?

インライン ブロック要素の垂直方向の配置の不一致

コンテンツを含むインライン ブロック要素が垂直方向に表示されるのはなぜですか位置ずれ?

説明:

CSS プロパティvertical-align は、デフォルトで要素のベースラインを親要素のベースラインに揃えます。要素にインフロー ライン ボックスがない場合、またはそのオーバーフロー プロパティが表示されない場合、ベースラインは下マージンの端に揃えられます。

提供された例では、最初は .divAccountData 要素にコンテンツがありません。その結果、ベースラインが親の下マージン端に揃えられ、.divAccountPicker 要素との位置がずれます。

解決策:

両方の要素を垂直方向に揃えるには、次のようにします。 .divAccountData 要素のvertical-align プロパティを top に設定します:

.divAccountData {
  vertical-align: top;
  /* Other CSS properties... */
}

This .divAccountData 要素のベースラインが .divAccountPicker 要素の上端と一致するようにします。

追加の考慮事項:

• この問題も解決できます。 .divAccountData 要素にテキストを追加することで、インフロー行ボックスが確立され、 baseline.
• ベースラインの配置は、各要素の行数の影響を受けます。行数が異なる場合は、両方の要素でvertical-align: topを使用して垂直方向の位置合わせを強制する必要があります。

以上がインラインブロック要素が垂直方向にずれるのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。