css - margin 似乎并没有在所有方面奏效。为什么？

我正在尝试做一个我在photoshop教程中看到的类似于photoshop的菜单。我只想使用CSS。

在＃main-box-container中，这并不是在所有方面都响应。

margin: 0 10px 0 10px;

使用float：left时，左边距有效，但不能右边。使用float向右时，保证金在右边，但不在左边。我尝试清除：保证金和边距仅在左侧起作用。如果不需要，我不想在#container上使用填充。

我的观点是在页面小于920px时保持页面流畅。我在这里想念什么？

这是我的工作

#container {
  max-width: 920px;
  height: 370px;
  background-color: #4a4a4a;
  margin: 0px auto;
}
#purchase-box-container {
  width: 250px;
  height: 50px;
  background-color: #fff;
  float: right;
  margin: 10px 10px 0px 0px;
  border-radius: 10px 10px 0 0;
}
#main-box-container {
  width: 100%;
  height: 200px;
  background-color: #fff;
  clear: both;
  /* counld not figure */
  margin: 0 100px 0 10px;
  border-radius: 10px 0px 10px 0;
}
#search-box-container {
  width: 275px;
  height: 50px;
  background-color: #fff;
  float: left;
  margin: 0 0 0 10px;
  border-radius: 0px 0px 10px 10px;
}

<div id=container>
  <div id="purchase-box-container">
    <div id="purchase-box"></div>
  </div>
  <div id="main-box-container">
    <div id="main-box"></div>
  </div>
  <div id="search-box-container">
    <div id="search-box"></div>
  </div>
</div>

最佳答案

您删除边距并向容器中添加填充。边距不会计算为宽度，因此，如果将宽度设置为100％，它将是容器宽度的100％加上边距。

（Demo）

#container {
  padding: 0px 10px 0px 10px;
  max-width: 920px;
  height: 370px;
  background-color: #4a4a4a;
  margin: 0px auto;
}
#purchase-box-container {
  width: 250px;
  height: 50px;
  background-color: #fff;
  float: right;
  border-radius: 10px 10px 0 0;
}
#main-box-container {
  width: 100%;
  height: 200px;
  background-color: rgb(50, 150, 250);
  clear: both;
  /* counld not figure */
  border-radius: 10px 0px 10px 0;
}
#search-box-container {
  width: 275px;
  height: 50px;
  background-color: #fff;
  float: left;
  border-radius: 0px 0px 10px 10px;
}

<div id="container">
  <div id="purchase-box-container">
    <div id="purchase-box"></div>
  </div>
  <div id="main-box-container">
    <div id="main-box"></div>
  </div>
  <div id="search-box-container">
    <div id="search-box"></div>
  </div>
</div>

关于css - margin 似乎并没有在所有方面奏效。为什么？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30008480/