Warum läuft der Container meiner Inline-Block-Elemente über und wie kann ich das beheben?

Inline-Block-Boxen überlaufender Container

Im bereitgestellten Code werden Inline-Block-Boxen verwendet, von denen erwartet wird, dass sie genau in den passen Container. Die Kästchen laufen jedoch aufgrund unerwarteter Abstände über.

Dieses Verhalten ist auf den inhärenten Abstand der Inline-Elemente und die Übernahme dieser Eigenschaft durch die Inline-Block-Elemente zurückzuführen. Leerzeichen oder Zeilenumbrüche zwischen Inline-Block-Elementen, wie Leerzeichen zwischen Span- oder Textelementen in einem Absatz, werden vom Browser erkannt und als zusätzliche Breite dargestellt.

Lösung

Um dieses Problem zu beheben, entfernen Sie alle Leerzeichen zwischen den Elementen im HTML-Code:

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

Das obige ist der detaillierte Inhalt vonWarum läuft der Container meiner Inline-Block-Elemente über und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!