「box-sizing: border-box」にもかかわらず、インラインブロック要素がコンテナからオーバーフローするのはなぜですか?

コンテナをオーバーフィットするインライン ブロック ボックス

CSS では、インライン ブロック要素は本質的に追加の間隔でレンダリングされます。これにより、予期しないオーバーフローやコンテナー内での折り返しが発生する可能性があります。

次の例を考えてみましょう:

.ok {
  width: 300px;
  background: red;
  height: 100px;
  box-sizing: border-box;
}

.box {
  display: inline-block; 
  box-sizing:border-box;
  width:25%;
  border:2px solid blue;
  height:100%;
}

<div class="ok">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

box-sizing: border-box を設定しているにもかかわらず、その中の inline-block 要素は容器がきちんと収まりません。これは、改行を含むインライン要素間のデフォルトの間隔により、余分な水平スペースが発生するためです。

これを解決するには、HTML ソース内の要素間の空白を削除できます。

<div class="ok"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div></div>

これにより、インラインブロック要素間に余分なスペースがなくなり、コンテナ内に適切に収まるようになります。

以上が「box-sizing: border-box」にもかかわらず、インラインブロック要素がコンテナからオーバーフローするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。