时间戳

首页 > 解决方案 > HTML容器div在其子项下方占用额外空间？

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

问题描述

我有一个容器 div，其中包含该网站中的项目网格

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

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

额外空间

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

我怎样才能消除这个间距？

标签： htmlcss

解决方案

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

.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。每当您执行 csstransform: scale时，它都会在进行缩放之前创建布局，这意味着元素的位置相对于 1.0 缩放时的位置。它绑定到顶部的原因是因为 css 使用 a 设置为这种方式transform-origin: top center，它将转换后的元素放在顶部和中心。如果你删除它，它只会将它全部缩小 0.8，在顶部和底部添加空白。

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

推荐阅读