我正在使用box-sizing：border-box到我页面上的所有内容。但是，当我在960.gs网格中的容器元素中添加填充时，它会将第二个网格碰到下一行。但是，如果我将它添加到各个网格类中，它确实可以正常工作。
<header role="banner" id="header">
<div class="container container_12">
<div class="grid_4">
logo here
</div>
<div class="grid_8">
tagline here
</div>
</div> </header>
将10px填充添加到.conatiner将grid_8包装到下一行。向grid_4和grid_8添加10px不会（box-sizing工作）。任何帮助表示赞赏。
答案 0 :(得分：2)
我相信它运作正常。
box-sizing: border-box会覆盖默认行为，即向（非绝对大小）元素添加填充和边框会增加该元素的总大小。对于border-box，所有元素的行为就像它们在填充方面的绝对大小一样：添加填充会增加元素边框与其内容之间的内部空间，但不会增加元素的总大小。
所以正在发生的事情是，通过向padding: 10px添加.container，您可以减少.container内容可用的水平内部空间量。由于.container的宽度不会增长（由box-sizing规则指定），并且子元素不缩小，因此第二个子元素必须换行，因为两个子元素的组合宽度现在都是大于.container的可用内部空间。
向.grid_元素添加填充“有效”（您的“作品”的定义假定为.container的孩子在一行中并且不包装）因为根据{{ 1}}规则，当给出填充时，这些元素除了设置宽度（由960 gs设置）之外不应该获得宽度。添加填充的结果是增加box-sizing元素的边框与其内容之间的空间（“此处为”logo“/”此处为“标语”），并减少.grid_元素的内部空间宽度”。
基本上，.grid_表示填充（和边框！）在内部添加，而不是在外部添加，并且您的示例一致地演示了此行为。