css - 将填充添加到容器但在网格之外

Question

我试图在不影响网格的情况下向 .container 添加填充。我能想到的最好的例子是我不希望内容碰到 .container 的两侧，因为如果设计说的是蓝色背景而 .container 是白色的，我希望左右都有一个填充.我很快做了一个 example page here显示问题。

我基本上是在尝试制作一个 1000 像素的容器和 20 像素的间距，然后每个容器将占用 65 像素。虽然在网格之外，但在 .container 内部，我希望左右填充也为 20px。不确定这是否有帮助或使事情变得更糟，但这是我的 Calca workout sheet for the grids

Answer 1

Neat 有一个名为 pad 的 mixin，它将填充应用于当前元素。

在你声明你的outer-container的地方，只需添加一个pad mixin并指定左值和右值，例如:

#container {
  @include outer-container;
  @include pad(default 50px default 50px);
}

在上面的例子中，参数的顺序是top，right，bottom，left。方便地，mixin 接受 default，因此如果您不关心它们，则无需知道 top 和 bottom 的现有值。

也就是说，如果您的用例是为了防止背景碰到侧面(而不是内容)，那么填充将无济于事，您需要改为修复边距。