向容器添加填充但在网格之外答案

【问题标题】：Adding padding to the container but outside of the grid向容器添加填充但在网格之外
【发布时间】：2013-10-10 13:18:30
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

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

这是 Paul Irish 关于这个问题的一篇好文章：http://www.paulirish.com/2012/box-sizing-border-box-ftw/

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

【讨论】：