Why Do Inline-Block Elements Overflow Their Container Despite `box-sizing: border-box`?

Inline-Block Boxes Overfitting Container

In CSS, inline-block elements are inherently rendered with additional spacing. This can lead to unexpected overflows or wrapping in containers.

Consider the following example:

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

Despite setting box-sizing: border-box, the inline-block elements within the container don't fit neatly. This is because the default spacing between inline elements, including line breaks, results in extra horizontal space.

To resolve this, one can eliminate whitespace between elements in the HTML source:

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

This ensures that there's no extra spacing between the inline-block elements, allowing them to fit properly within their container.

The above is the detailed content of Why Do Inline-Block Elements Overflow Their Container Despite `box-sizing: border-box`?. For more information, please follow other related articles on the PHP Chinese website!