包装网格布局 - 边界/填充和覆盖问题

我一直在使用metafizzy同位素包装模式的网格布局，并已建立一个codepen下面向您展示我的问题。包装网格布局 - 边界/填充和覆盖问题

我几乎高兴我的网格，除了两个问题。

1 - 我将填充应用于主栅格选择器类“griditem”，我期望在所有栅格项目周围应用简单的白色边缘。然而，结果是混合的，有些差距比其他差距更小/更大。我试图用CSS边框产生同样的东西，但也遇到同样的问题。

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

2 - 有那么上揭示了一个标题/标题，但每个网格项的覆盖，由于覆盖逃跑是没有办法阻止这种情况发生的填充？

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

得到任何帮助。

UPDATE

从下面的codepen应用的答案，翻滚状态现在固定和罚款。正如你所看到的，尽管不均匀的边界/填充仍然是例如在第一个蓝色框。

来源

2016-09-16 Chris

这为我工作：

在你的CSS代码的顶部，诠释了*选择块，补充一点：

margin: 0; 
padding: 0

与空间的问题是几乎总是与浏览器添加问题额外的利润率等，这样一个简单的CSS重置应该照顾它。欲了解更多详情，请参阅Eric Meyer's CSS reset。

来源

2016-09-16 13:50:23 theEpsilon

感谢您的评论，它略有改善，但我还是看到了不平等的边界。它似乎主要在方形三分之一大小的盒子上。我会检查出CSS重置表，谢谢你的提示。 – Chris

删除是对你的身体/ html标记保证金：

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

#wrapper .text-overlay使用100％的宽度和高度在里面。由于您使用的是绝对定位，因此可以使用顶部，底部，左侧，右侧属性。试试这个：

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

来源

2016-09-16 13:58:30 Serf

谢谢，第一点帮助从网格周围取出一些不需要的像素，但是我仍然看到了不均匀的边界。至于你的第二点，使用顶部，底部，左侧和右侧的工作完美，并已修复翻转状态的重叠，谢谢。 – Chris

包装网格布局 - 边界/填充和覆盖问题

回答

相关问题