javascript - Packery 网格布局 - 边框/填充和覆盖问题

Question

我一直在使用 metafizzy isotope packery 模式进行网格布局，并在下面设置了一个代码笔来向您展示我的问题。

http://codepen.io/anon/pen/EgKdpL

除了两个问题，我对我的网格几乎很满意。

1 - 我将填充应用于主网格选择器类“griditem”，我希望它在所有网格项周围应用简单的白色边缘。然而，结果好坏参半，有些差距比其他差距小/大。我曾尝试使用 CSS 边框制作相同的东西，但遇到了同样的问题。

.grid-sizer,
.grid-item {
   margin: 0!important;
   padding: 10px!important;
}

2 - 每个网格元素上都有一个覆盖层，显示标题/标题，但由于填充，覆盖层会消失，有没有办法阻止这种情况发生？

http://codepen.io/anon/pen/EgKdpL

感谢任何帮助。

更新

已将下面的答案应用到 codepen，翻转状态现在已修复且正常。正如您所看到的，尽管不均匀的边框/填充仍然存在，例如在第一个蓝色盒子上。

Answer 1

这对我有用:

在 CSS 代码的顶部，在 * 选择器 block 中添加:

margin: 0;
padding: 0

空间问题几乎总是浏览器添加额外边距的问题，像这样的简单 CSS 重置应该可以解决它。有关详细信息，请参阅 Eric Meyer's CSS reset .