CSS问题：Div容器内出现未知间距的排查求助

这个问题我之前也碰到过好几次！根源在于inline-block元素的默认垂直对齐方式是baseline（基线），不是你没写CSS导致的，是浏览器的默认布局规则在搞鬼。

你的.totalsContainer和.listingsContainer都是display: inline-block，浏览器会自动把它们的文本基线对齐，但两个容器里的标题（h1、h2）自带默认margin，加上内容高度差异，就会让其中一个容器看起来向下偏移了。

给你两个直接解决的方案：

方案1：显式设置垂直对齐方式 #

给这两个容器加上vertical-align: top，强制它们顶部对齐，最直接解决偏移：

.totalsContainer, .listingsContainer {
  margin-top: 0px;
  display: inline-block;
  border: 1px solid white;
  height: 100%;
  vertical-align: top; /* 新增这一行 */
}

方案2：重置标题的默认边距（可选，优化布局） #

h1、h2标签默认有上下margin，也会间接影响容器的布局，建议把它们的默认margin去掉，让布局更可控：

.infoLabel {
  font-size: 14px;
  margin: 0; /* 新增 */
}
.infoValue {
  font-size: 10px;
  text-align: center;
  margin: 0; /* 新增 */
}

这两个方案结合起来，就能彻底解决你遇到的偏移问题了，我在多个项目里用这个方法解决过同样的问题，亲测有效！

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