为何设置box-sizing:border-box后inline-block元素仍溢出换行？

问题原因 #

inline-block 元素之间的HTML换行、空格会被浏览器渲染为默认的空白间隙，三个宽度为33.3333%的盒子加上间隙总宽度超过父容器可用宽度，因此第三个盒子被挤到下一行。

可选用的解决方法 #

• 方法1：删除HTML中子元素之间的空白
  直接将三个盒子的标签连写，消除换行/空格产生的间隙：

  <div class="container">
    <div class="box green"></div><div class="box red"></div><div class="box blue"></div>
  </div>
  

• 方法2：给父容器设置font-size: 0消除空白占位
  空白间隙本质是文本字符的占位，给父容器设置font-size: 0即可消除占位，若子盒子内有文字内容，给子盒子单独重置字体大小即可：

  .container {
    width: 1000px;
    height: 500px;
    border: 10px solid black;
    margin: 0 auto;
    font-size: 0;
  }
  /* 子盒子有文字时添加以下规则 */
  .box {
    font-size: 16px;
  }
  

• 方法3：改用Flex布局（更推荐）
  无需处理间隙问题，兼容性也足够覆盖绝大多数使用场景：

  .container {
    width: 1000px;
    height: 500px;
    border: 10px solid black;
    margin: 0 auto;
    display: flex;
  }
  

  该方案下可以删除三个彩色盒子的display: inline-block规则，保留原有宽度、样式规则即可正常生效。

内容的提问来源于stack exchange，提问作者Jonathan