Warum läuft der Container von Inline-Block-Elementen trotz „box-sizing: border-box' über?

Inline-Block Boxes Overfitting Container

In CSS werden Inline-Block-Elemente von Natur aus mit zusätzlichem Abstand gerendert. Dies kann zu unerwarteten Überläufen oder Umbrüchen in Containern führen.

Betrachten Sie das folgende Beispiel:

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

Trotz der Einstellung box-sizing: border-box werden die darin enthaltenen Inline-Block-Elemente angezeigt Der Behälter passt nicht richtig. Dies liegt daran, dass der Standardabstand zwischen Inline-Elementen, einschließlich Zeilenumbrüchen, zu zusätzlichem horizontalem Abstand führt.

Um dieses Problem zu beheben, kann man Leerzeichen zwischen Elementen in der HTML-Quelle entfernen:

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

Dadurch wird sichergestellt, dass zwischen den Inline-Block-Elementen kein zusätzlicher Abstand entsteht, sodass sie richtig in ihren Container passen.

Das obige ist der detaillierte Inhalt vonWarum läuft der Container von Inline-Block-Elementen trotz „box-sizing: border-box' über?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!