Question

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

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

1 - 我将填充应用于主网格选择器类＆＃34; griditem＆＃34;我希望在所有网格项目周围应用简单的白边。然而，结果是混合的，一些差距小于/大于其他差距。我试图使用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

删除body / html标记上的边距：

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

#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;
}

填充网格布局 - 边框/填充和叠加问题

2 个答案: