左边和右边的保证金仅显示在左边

Question

我试图将左右边距放在也是100％宽度的东西上。似乎左边和右边都放在左边的尺寸上（左边总共200px而不是100px左边。这是什么原因？

这里展示了：

http://jsbin.com/xomocitono/1

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

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

谢谢！

Answer 1

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

https://developer.mozilla.org/en-US/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>

Answer 2

实际上它发生了bcoz你给div的宽度为 100％

只需删除该宽度即可获得正确的输出

用这个替换你的css

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

Answer 3

div已经是100％了。只放置边距。 http://jsfiddle.net/0df0emjc/

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