嘿，这个问题其实是inline-block元素最经典的“坑”之一，你忽略了HTML中换行/空格会被解析为空白字符，而inline-block元素会渲染这些空白。

先看你的第一段代码问题所在： #

你的.form-group设置了display: inline-block，而HTML里的div是换行写的：

<div class="form-group col-4">1</div>
<div class="form-group col-4">2</div>

浏览器会把这两行之间的换行解析成一个空格字符。每个.form-group的宽度是33.333%，加上这个空格的宽度，两个元素的总宽度就超过了容器（body）的100%，所以第二个div自然被挤到了下一行。

而且你的.form-group还加了padding: 8px，虽然box-sizing: border-box让padding算在宽度里，但空格的额外宽度依然是压垮骆驼的最后一根稻草。

为什么第二段代码看起来没问题？ #

第二段里只有#div2、#div3、#div4是inline-block，而#div1和#div5是默认的block元素（独占一行）。那三个inline-block元素其实也存在空白，但因为：

1. 它们没有额外的padding/margin，总宽度（3*33.333% + 两个空格）刚好接近100%，浏览器的宽度计算四舍五入后刚好能容纳；
2. 或者你截图里没注意到，但实际上它们之间也是有细微空白的，只是因为背景色填充后不明显。

怎么解决这个问题？ #

给你几个常用的方案，按推荐程度排序：

• 方案1：改用Flex布局（最推荐）
  完全避开inline-block的空白问题，布局更灵活。给父容器（比如body）加上：

  body {
    display: flex;
    flex-wrap: wrap;
  }
  .form-group {
    display: block; /* 不需要inline-block了 */
  }
  

  这样元素会自动按一行排列，超出就换行，完全不用管空白字符。

• 方案2：父元素设置font-size: 0
  空白字符本质是文本，把父元素的字体大小设为0，空白就不会占宽度了，然后给子元素重新设置font-size：

  body {
    font-size: 0;
  }
  .form-group {
    font-size: 16px; /* 恢复正常字体大小 */
  }
  

• 方案3：去掉HTML里的换行/空格
  把inline-block元素写在同一行，消除空白字符：

  <div class="form-group col-4">1</div><div class="form-group col-4">2</div><div class="form-group col-4">3</div>
  

  缺点是HTML可读性变差。

• 方案4：用注释消除换行
  折衷的写法，既保持HTML可读性，又消除空白：

  <div class="form-group col-4">1</div><!--
  --><div class="form-group col-4">2</div>
  

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