幅 50% の 2 つのインライン ブロック要素が並べて適合しないのはなぜですか?

幅 50% の 2 つのインライン ブロック要素が連続して並べて適合しない: なぜですか?

インライン ブロックを使用する場合要素間の空白 (幅約 4 ピクセル) に固有の問題があります。これは、それぞれ幅 50% の 2 つの div とこの空白を加えたものが幅 100% を超え、意図した単一行からはみ出すことを意味します。

例:

body {
  margin: 0;
}

div {
  display: inline-block;
  width: 50%;
}

.left {
  background-color: aqua;
}

.right {
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

空白の理由問題:

• マージンの折りたたみ: インライン要素のマージンがマージまたは折りたたまれません。代わりに、要素間に小さなスペースが作成されます。
• インライン要素間の間隔: パディングまたは境界線が定義されていない場合、ブラウザは通常、インライン要素間に 4 ピクセルのギャップを追加します。

代替解決策:

1 つを設定しながらdiv を 49% 幅にするとギャップの問題を解決できますが、これは理想的な方法ではありません。代替案は次のとおりです。

• Float: フローティング要素はインライン ギャップの問題を解決しますが、垂直方向の配置に影響します。
• Flexbox: フレックスボックスを使用すると、次のことが可能になります。より正確なレイアウト制御を実現し、空白を回避します。
• CSS グリッド: 最新の CSS グリッド レイアウトは、要素の位置を制御するためのグリッド ベースのアプローチを提供し、インライン ブロック要素の必要性とその間隔の問題を排除します。

以上が幅 50% の 2 つのインライン ブロック要素が並べて適合しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。