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

Question

我正在尝试在不影响网格的情况下向 .container 添加填充。我能想到的最好的例子是我不希望内容碰到 .container 的两侧，因为如果设计中有蓝色背景而 .container 是白色的，我希望在左右两边都有一个填充. 我在这里快速制作了一个示例页面来显示问题。

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

score 4 · Accepted Answer

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

在您声明的地方，您outer-container只需添加一个padmixin 并指定左右值，例如：

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

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

也就是说，如果您的用例是为了防止背景撞到侧面（而不是内容），那么填充对您没有帮助，您需要修复边距。

score 2 · Accepted Answer

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

这是保罗爱尔兰关于这个问题的一篇好文章：http: //www.paulirish.com/2012/box-sizing-border-box-ftw/

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

2 回答 2