display inline-block 属性と box-sizing: border-box 属性を持つ 2 つの div を一緒に配置すると、境界線が異なると白い空白領域が表示されるのはなぜですか?

Question

このコードを検討してください。なぜ d3 と d4 が整列していないのでしょうか? d4 の上部の空白は何ですか?

リーリー リーリー

これら 2 つの div は両方ともインライン ブロックをレンダリングし、幅 150 ピクセル、高さ 150 ピクセルを持つ必要があります。なぜ 2 番目の div が最初の div よりも少し低いのですか。 これがレンダリングされるものです:

Answer 1

インライン 要素のデフォルトの 垂直方向の配置がベースラインであるためです。 top のような値に設定することで簡単に変更できます。

リーリー リーリー