Packery Grid Layout - 边框/填充和覆盖问题

Question

我一直在使用 metafizzy 同位素打包模式进行网格布局，并在下面设置了一个 codepen 来向您展示我的问题。

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 代码的顶部，在 * 选择器块中添加以下内容：

margin: 0;
padding: 0

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

Answer 2

1. 删除 body/html 标签上的边距：

   html, body {
       margin: 0;
       padding: 0;
   }
   

2. #wrapper .text-overlay 在其中使用 100% 的宽度和高度。由于您使用的是绝对定位，因此您可以使用 top、bottom、left、right 属性。试试这个：

   #wrapper .text-overlay {
       position: absolute;
       visibility: hidden;
       background-color: RGBA(40, 44, 52, 0.9);
       font-family: 'Old Standard TT', serif;
       letter-spacing: 0.5px;
       display: block;
       margin: 0 auto;
       top: 10px;
       left: 10px;
       right: 10px;
       bottom: 10px;
       color: #fff;
   }