DIV 边距不起作用

Question

谁能告诉我下面的代码有什么问题。左边距和上边距.middle不起作用。

我做了很多工作，但找不到下面的代码有任何问题。

请遵守.middle班级及其div适用情况.middle。

.container {
  height: 48px;
  width: 80%;
  background-color: #999;
  margin: 0 auto;
}
.left {
  margin-left: 6px;
  height: 40px;
  background-color: red;
  margin-top: 4px;
  float: left;
  overflow: hidden;
  width: 30%;
}
.middle {
  margin-left: 6px;
  height: 40px;
  background-color: green;
  margin-top: 4px;
  overflow: hidden;
  width: auto;
}
.right {
  margin-left: 6px;
  height: 40px;
  background-color: blue;
  margin-top: 4px;
  margin-right: 6px;
  float: right;
  overflow: hidden;
  width: 40%;
}
.button {
  float: right;
  margin-right: 6px;
  height: 32px;
  width: 100px;
  border-style: solid;
  border-width: 1px;
  margin-top: 4px;
  border-color: #333;
}
p {
  color: blue;
  overflow: hidden;
  width: 50%;
}

<div class="container">
  <div class="right">
    <button class="button">Search</button>
  </div>
  <div class="left"></div>
  <div class="middle"></div>
</div>

Answer 1

这主要是由于利润率下降造成的。

关于顶部边距，实际上它仍然存在，但它正在溢出.container。要修复添加overflow: auto;到.container停止边距折叠的问题。

二是由于.left浮动。要将其添加margin到左侧，.middle您可以：

• 使用calc(30% + 12px)(( width) .left+ ( margin) .left+ ( margin) .middle)
• 添加margin-right: 6px;到.left浮动元素margin不会折叠感谢@Alohci 的建议

.container {
  height: 48px;
  width: 80%;
  background-color: #999;
  margin: 0 auto;
  overflow: auto;
}
.left {
  margin-left: 6px;
  height: 40px;
  background-color: red;
  margin-top: 4px;
  float: left;
  overflow: hidden;
  width: 30%;
}
.middle {
  margin-left: calc(30% + 12px);
  height: 40px;
  background-color: green;
  margin-top: 4px;
  overflow: hidden;
  width: auto;
}
.right {
  margin-left: 6px;
  height: 40px;
  background-color: blue;
  margin-top: 4px;
  margin-right: 6px;
  float: right;
  overflow: hidden;
  width: 40%;
}
.button {
  float: right;
  margin-right: 6px;
  height: 32px;
  width: 100px;
  border-style: solid;
  border-width: 1px;
  margin-top: 4px;
  border-color: #333;
}
p {
  color: blue;
  overflow: hidden;
  width: 50%;
}

<div class="container">
  <div class="right">
    <button class="button">Search</button>
  </div>
  <div class="left"></div>
  <div class="middle"></div>
</div>