Question

我正在尝试向.container添加填充，而不会影响网格。我能想到的最好的例子是我不希望内容出现在.container的两侧，因为如果设计说蓝色背景并且.container是白色的，我希望左边和右边有一个填充。我快速做了example page here来表明问题。

我基本上试图用一个20px的水槽制作1000px的容器，然后每个容器需要65px。虽然在网格之外但是在.container里面我想要左右填充也是20px。不确定这是否有帮助或使事情变得更糟，但这是我的Calca workout sheet for the grids

Answer 1

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

您已声明outer-container只需添加pad混合并指定左右值，例如：

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

在上面的示例中，参数的顺序为top，right，bottom，left。轻松地，mixin会接受default，因此如果您不关心它们，您就不需要知道顶部和底部的现有值。

也就是说，如果您的用例是为了防止背景出现在侧面（而不是内容），那么填充不会帮助您，而您需要修改边距。

Answer 2

通常，网格系统使用box-sizing: border-box;来克服有关边距和填充的框模型计算问题。

来自CSS Tricks的Chris Coyier也有一篇好文章：http://css-tricks.com/box-sizing/