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 here

如何使用网格，确保网格宽度保持90px，内部'div'为100％宽度，20px填充/边距？

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

Answer 1

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

* { box-sizing: border-box }

适用于旧版本的Safari＆amp;火狐：

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

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

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

1 个答案: