布局异常求助：两个300px盒子无法在600px容器内并排

问题根源 #

1. 水平放不下的原因：display: inline-block的元素会把HTML代码中它们之间的换行、空格等空白字符渲染成实际间距，两个300px的盒子加这个空白字符总宽度超过了父容器的600px，导致第二个盒子被挤到下一行。
2. 垂直间距的原因：inline-block元素默认是基线对齐，会和文本基线对齐，从而让盒子底部出现莫名间隙。

解决方法 #

方法1：消除HTML中的空白字符

直接把两个div写在同一行，或者用注释隔开中间的空白：

<main>
  <div id="left"></div><div id="right"></div>
</main>

或者：

<main>
  <div id="left"></div><!--
  --><div id="right"></div>
</main>

方法2：父元素设置font-size: 0

空白字符的宽度由父元素字体大小决定，给父容器main设置font-size: 0可消除这个间距，之后再给子元素恢复需要的字体大小（如果有文本内容）：

main {
  background: #000;
  height: 600px;
  margin: 25px;
  width: 600px;
  font-size: 0; /* 消除空白字符宽度 */
}

#left, #right {
  display: inline-block;
  height: 300px;
  width: 300px;
  font-size: 16px; /* 恢复字体大小 */
  vertical-align: top; /* 解决垂直间距 */
}

方法3：改用Flexbox布局（推荐）

这是现代布局的最优解，完全避开inline-block的各种坑，父容器设为flex后，子元素自动并排，无需处理空白字符：

main {
  background: #000;
  height: 600px;
  margin: 25px;
  width: 600px;
  display: flex; /* 启用flex布局 */
}

#left, #right {
  height: 300px;
  width: 300px;
}

方法4：修正inline-block的对齐方式

如果一定要用inline-block，除了消除空白，还要给子元素加vertical-align: top取消基线对齐，解决垂直间隙：

#left, #right {
  display: inline-block;
  height: 300px;
  width: 300px;
  vertical-align: top; /* 消除垂直间隙 */
}

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