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

コンテンツを含むインライン ブロック要素の垂直方向の配置

質問:

インライン ブロック要素にコンテンツが含まれるのはなぜですかずれているように見える垂直方向?

説明:

デフォルトでは、インラインブロック要素はベースライン ルールを使用して垂直方向に配置されます。これは、要素のベースライン (ほとんどの文字が配置される行) が、その親コン​​テナのベースラインと一致することを意味します。

ただし、提供された CSS のように、これらの要素の 1 つにコンテンツが含まれていない場合、ブラウザのデフォルトでは、要素は下マージン端に配置されます。この不一致により、垂直方向のずれが認識される可能性があります。

解決策:

正しく垂直方向に配置するには、vertical-align プロパティを top に設定します。これにより、デフォルトのベースライン ルールを使用するのではなく、要素が親の先頭に配置されます。

.divAccountData {
    display: inline-block;
    background: red;
    width: 400px;
    height: 40px;
    vertical-align: top;
}

注:

両方のインライン ブロック要素にテキストの行数が同じ場合、2 番目の要素にテキストを追加すると、配置の問題が解決されるように見える場合があります。ただし、これは単に 2 番目の要素にベースラインの確立を強制するためです。行数が変わると、vertical-align プロパティを適用しないと、また配置が不安定になります。

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