如何消除HTML/CSS中并排inline-block盒子间的空白间距？

间隙的核心来源是你给.box设置的display: inline-block属性：行内块元素属于行内级元素，浏览器会按照文本排版规则解析它们，两个.box标签在HTML源码中存在的换行、缩进，会被解析为一个普通的半角空格字符，这个字符占据的宽度就是你看到的白色空隙。全局重置margin和padding无法清除这类由源码排版产生的文本间隙。

按实用性从高到低排序：

• 改用Flex布局（优先推荐）
  这是现代前端实现并排布局的首选方案，从根源上规避行内块的间隙问题，不需要额外处理源码空格，适配性更强：

  /* 父容器新增flex声明 */
  section {
    display: flex;
    /* 不需要保留原有的white-space: nowrap */
  }
  .box {
    /* 删除原有display: inline-block声明，其余样式保持不变即可 */
  }
  

• 父容器设置零字号
  间隙本质是文本字符，给父元素设置font-size: 0可以让空白字符宽度为0，注意要给子盒子单独重置回需要的字号，避免内部文字消失：

  section {
    font-size: 0;
  }
  .box {
    font-size: 16px; /* 按实际需求设置字号 */
  }
  

• 移除标签间的源码空白
  直接把两个.box标签连写，去掉中间的换行缩进，浏览器就不会解析出多余空格：

  <section>
    <div class="box"></div><div class="box"></div>
  </section>
  

• 负margin抵消（不推荐）
  给后一个盒子设置左负外边距抵消空格宽度，比如margin-left: -4px，但这个宽度会随父元素字体大小变化，适配成本高，仅作为临时方案使用。

补充说明：你当前在section上设置的white-space: nowrap仅能阻止行内内容自动换行，无法清除行内块之间的固有文本间隙，不要依赖这个属性解决空隙问题。

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