幅 50% の 2 つのインラインブロック要素が常に隣り合って配置されないのはなぜですか?

幅 50% のインライン ブロック要素が並べて収まらない理由

2 つのインライン ブロック要素が 50 で指定された場合% 幅の場合、並べて整列できないことがよくあります。この問題は、約 4 ピクセルを占めるインライン ブロック要素間の固有の空白によって発生します。

空白の問題

この空白を含めると、両方の div の幅を合わせた幅は 100 を超えます。 % になり、バラバラになってしまいます。たとえば、それぞれ幅 50% の 2 つのインライン ブロック div を使用すると、合計幅はコンテナーの 150% になり、次のようになります:

<div>50% + 4px whitespace + 50%</div>

Solutions

1 つの div の幅を 49% に減らすと問題は解決する可能性がありますが、div 間に小さなギャップが生じます。あるいは、div をフローティングにすることも効果的に機能します。

ただし、最新の Web 開発では、要素の位置決めと空白の問題の解決をより適切に制御できるため、インライン ブロックの代わりにフレックスボックスまたは CSS グリッド レイアウトを利用することを強くお勧めします。

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