HTML 容器 div 占用其子项下方的额外空间？

Question

我有一个容器 div，其中包含 this website 中的元素网格

但是我注意到父 div 在底部占据了一些额外的空间，如下图所示。

我在子 div 上没有任何填充或边距，当我在 chrome 检查器中检查它的大小时，它似乎是正确的。

这是重现问题的最小代码笔:codpen link ，请注意 .container-team 容器 div 和下一个 div 之间的间距。

如何消除这个间距？

Answer 1

快速而肮脏的解决方案是仅向父容器添加负边距:

.container-team {  
  max-width: 1170px;
  width: 100%;
  margin: 0px auto;
  margin-bottom: -25%;
  padding: 0 0px;
  box-sizing: border-box;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}

https://codepen.io/anon/pen/eXJNBw?editors=1100

但是，您看到这个额外空白的原因是因为您将所有内容都缩放了 0.8。每当您执行 css transform: scale 时，它都会在进行缩放之前创建布局，这意味着元素的定位是相对于它在 1.0 缩放时的位置。它绑定(bind)到顶部的原因是因为 css 使用 transform-origin: top center 设置为这种方式，它将转换后的元素放在顶部和中心。如果您删除它，它只会将其全部缩小 0.8，并在顶部和底部添加空白。

负边距修复很好，但如果你想要一个更强大的解决方案，你应该考虑缩小每个用户元素并使用 margin-left 和 margin-right 而不是缩放整个元素。