インラインブロック要素が横に並んでいないのはなぜですか?

Inline-Block 要素を並べて配置できない

display: inline-block を持つ 2 つの要素に 50% の幅が割り当てられるシナリオを考えてみましょう。並べて収まると思われるかもしれませんが、実際には利用可能なスペースを超えてしまいます。これを解決するには:

問題の原因

インラインブロック要素は、視覚的には削除されているように見えますが、要素間のマージンを継承します。この余分な空白 (通常は約 4 ピクセル) により、2 つの要素の合計幅が 100% を超えます。

代替解決策

• 要素の幅を減らす: 1 つの要素の幅を 49% にすると、オーバーフローの問題は解決されますが、望ましくない問題が発生します。ギャップ。
• フロート要素: 両方の要素をフローティングすると、それぞれの幅が 50% 維持され、正しく配置されます。

最新のブラウザーに最適なソリューション (2021 年以降) )

フレックスボックス またはCSS Grid Layout は、インラインブロックの代替として推奨されます。これらにより、固有の空白の問題が発生することなく、スペースとレイアウトをより適切に制御できます。

インライン ブロックと空白

空白の問題を説明するには、次のコードを考えてみましょう。

body {
  margin: 0; /* remove default body margin */
}

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

.left {
  background-color: aqua;
}

.right {
  background-color: gold;
}

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

要素は隣接しているように見えますが、実際にはそれらの間には狭いマージンがあります。

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