左右边距只显示在左侧。

Question

我想在一个宽度为100%的元素上设置左右边距。但是似乎左右边距都被放在了左侧（总共200像素，不是各100像素）。这是什么原因？

示例如下：

http://jsbin.com/xomocitono/1

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

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

谢谢！

- Jimmy

---

删除 width: 100%; 就可以正常工作了。 - Kevin

Answer 1

您可以使用calc函数来减去边距 calc(100% - 200px);

https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc

支持 IE9 +

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

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

或者你可以简单地移除 width

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

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

- Vitorino fernandes

---

为什么不直接移除宽度？ - Salman A

是的，那也是正确的。 - Vitorino fernandes

Answer 2

实际上，它的Margin左右两侧仅在左侧显示，因为您已将div的宽度设为100％。

只需删除该宽度，即可获得正确的输出，但您必须使用以下代码替换CSS代码：

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

在这段代码中，100%的宽度已经消失了，这可能是它不起作用的原因。

- Minal Telgade

Answer 3

已经将div宽度设置为100%，只需调整边距即可。http://jsfiddle.net/0df0emjc/

<div id="main">
  Test
</div>
#main {
    margin:0 100px 0 100px;
    background: red;
}

- Rodrigo Zem