为何设置33.3%宽度的三个inline-block div无法在100%宽度容器内同行显示？

哈哈，这个问题我碰到好多次了！罪魁祸首就是inline-block元素之间的空白字符。

你看，HTML里三个.box div之间的换行、空格，在浏览器里会被渲染成实实在在的空格字符，它是要占宽度的。你算笔账：三个33.3%加起来是99.9%，再加上两个空格的宽度，总宽度直接超过父容器的100%，第三个盒子自然就被挤到下一行啦。

给你几个实用的解决办法，按需选就行：

方案1：干掉HTML里的空白字符 #

把三个.box的标签直接连在一起，彻底消除它们之间的换行和空格：

<div class="parent">
  <div class="box">1</div><div class="box">2</div><div class="box">3</div>
</div>

优点是零CSS改动，缺点是HTML代码的可读性会变差一丢丢。

方案2：给父容器设font-size: 0 #

inline-block的空白大小是继承父元素字体大小的，把父容器字体设为0，空白就没了，记得给子元素重新设置字体大小：

.parent { 
  width: 100%; 
  font-size: 0; /* 消除空白字符的宽度 */
}
.box { 
  width: 33.3%; 
  display: inline-block; 
  font-size: 16px; /* 恢复子元素的正常字体大小 */
}
body { margin: 0; padding: 0; }

这个方法不折腾HTML结构，兼容性也拉满，老浏览器也能跑。

方案3：改用Flex布局（强烈推荐） #

现在Flex布局已经是前端布局的主流了，完全不用操心这种空白问题，还能灵活调整各种布局细节：

.parent { 
  width: 100%; 
  display: flex; /* 开启Flex布局 */
}
.box { 
  flex: 1; /* 让三个盒子自动平分父容器宽度 */
  /* 如果你还是想固定33.3%宽度，保留width:33.3%也可以 */
}
body { margin: 0; padding: 0; }

除了解决换行问题，Flex还能轻松实现垂直居中、响应式适配这些需求，属于一劳永逸的方案。

方案4：用负margin抵消空白 #

给.box设置负的margin值，把空白的宽度抵消掉：

.box { 
  width: 33.3%; 
  display: inline-block; 
  margin-right: -4px; /* 数值可以根据实际字体大小微调 */
}

这个方法需要手动调整margin值，不同字体可能有差异，不如前几个方案稳妥，一般不优先选。

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