「ボーダーボックス」のサイズ設定にもかかわらず、コンテナーがインラインブロック要素でオーバーフローするのはなぜですか?

Inline-Block 要素によるコンテナ オーバーフローについて

提供された HTML および CSS コード スニペットでは、inline- の使用によって問題が発生します。コンテナ内のブロック要素。デフォルトでは、インライン ブロック要素は、特定のブラウザで追加の空白文字とともに表示されます。

空白のソース

この空白文字は、インライン ブロック要素のインライン特性に由来します。テキスト要素内のスペースや改行によって可視スペースが作成されるのと同様に、インラインブロック要素内でも同様です。その結果、ボーダーボックスのサイズ変更が適用されていても、この空白によって生じる予期せぬ幅によりコンテナのオーバーフローが発生します。

解決策: 空白を削除する

このオーバーフローの問題を解決するには、ソース コード内のインライン ブロック要素間の空白をすべて削除する必要があります。そうすることで、ブラウザは追加のスペースを入れずに要素をレンダリングし、要素がコンテナ内にきちんと収まるようにします。

改訂されたコード スニペット:

.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>

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