インラインブロック要素が垂直方向にずれているのはなぜですか?

インライン ブロック要素の垂直方向のずれの謎を明らかにする

インライン ブロック要素のコンテンツが垂直方向にずれて見えるという不可解な CSS 問題に遭遇しました?原因はデフォルトの垂直方向の配置値である可能性があります。

インラインブロック要素にはデフォルトの垂直方向の配置であるベースラインがあり、ボックスのベースラインを親要素のベースラインに揃えます。これにより、要素にインフロー ライン ボックスが含まれていない場合、または表示以外のオーバーフロー値がある場合、予期しない位置合わせが発生する可能性があります。

次の HTML と CSS を考慮してください:

<div>

#divBottomHeader {
  height: 43px;
}
.divAccountPicker {
  width: 200px;
  height: 40px;
}
.divAccountData {
  width: 400px;
  height: 40px;
}

この例では、「.divAccountData」要素が「.divAccountPicker」と比較して下にシフトして表示されます。 ".divPutTextToFixIssue" にテキストを追加すると、魔法のように要素が垂直方向に整列します。

この動作は、inline-block 要素のベースラインが最後の行ボックスのベースラインによって決定されるという事実から発生します。 「.divPutTextToFixIssue」にテキストを追加することで、ベースラインを効果的に変更し、配置を強制的に上に配置しました。

ただし、両方のブロックに含まれる行数が異なる場合、配置は再び崩れます。一貫した垂直方向の配置を確保するには、vertical-align プロパティを使用して配置を強制します。

.divAccountData {
  vertical-align: top;
}

これにより、行数に関係なく、「.divAccountData」のベースラインが「.divAccountPicker」の上部に配置されます。

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