Div 100% 宽度和边距

Question

我试图在同样为 100% 宽度的东西上放置一个左右边距。我使用的是 box-sizing 方法，我希望它可以说 100% 包括边距，但它确实 100% 加上边距，这意味着我有一个垂直滚动条。

这里演示了：

http://jsbin.com/xomocitono/1

  <div id="main">
    Test
  </div>

#main {width: 100%; margin-left: 100px; margin-right: 100px; background: red;}

在我自己的特殊情况下，我不能使用以下内容：

1. 改用填充，因为即使它按我想要的方式工作（就 100% 宽度而言），填充会覆盖下面的链接，而边距则不会。

2. CSS Calc（它不像我希望的那样跨浏览器）

3. 固定宽度#main，因为我希望它是流畅的，只是两边都有边距。

我还有其他选择吗？

Answer 1

当您使用 ma​​rgin-left 和 ma​​rgin-right 时，您不必指定 width。

试试这个：

#main
{
 margin-left: 10%;
 margin-right: 10%;
 background: red;
}