css - 当我需要填充和边距时如何使用网格？

Question

我一直不使用任何类型的网格系统，因为我总是用填充和边距搞砸它。

让我们坐下来，我的网格是 90px，我有这个代码：

//HTML
<div class="col1">
 <div class="content">
   Hello world
 </div>
</div>

//CSS
.col1 { width: 90px; margin: 0px; padding: 0px; background-color: #444; }
.content { margin: 20px; color: #fff; background-color: #0087d5; width: 100%; }

JSfiddle 在这里。

我如何使用网格，确保网格保持 90px 宽度，同时在 'div' 内部以 100% 宽度使用 20px 填充/边距？

我知道那里有很多网格系统并且我已经测试了一些，但是我必须以错误的方式“攻击”这个，因为当我开始使用填充以获得一些空间时，我的网格总是会扩展。

Answer 1

您应该应用box-sizing，它在计算宽度时考虑填充（即90px+10px用于填充，将向内应用填充，而不是创建 的总宽度。110px如果您想更加安全，请将其添加到您的重置或规范化样式表中：

* { box-sizing: border-box }

对于旧版本的 Safari 和 Firefox：

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box }

使用通配符选择器允许将box-sizing属性应用于所有元素。我知道这包含在一些网格系统中，例如Skeleton。