停止扩展父级股息的保证金

Question

我有一个父级和子级div，当我向子级div添加边距时，它会扩展父级div。我该如何阻止这种情况的发生。您会在这里看到它的发生，因为出现了滚动条。

我看了这个类似的问题，但我似乎认为答案没有任何作用。

html, body {
  height: 100%;
  width: 100%;
  margin: 0px;
}

.container {
  background-color: orange;
  height: 100%;
  width: 100%;
}

.child {
  background-color: green;
  height: 100%;
  width: 200px;
  margin: 10px;
}

<div class="container">
  <div class="child"></div>
</div>

我希望这是最终输出。橙色div的高度为100％

Answer 1

如果您希望子div的边距塌陷，请将overflow: hidden交给父div。

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0px;
}

.container {
  background-color: orange;
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 10px;
}

.child {
  background-color: green;
  height: 100%;
  width: 200px;
}

<div class="container">
  <div class="child"></div>
</div>

现在没有滚动条。我在父级上使用padding而不是margin。请不要使用calc()-这不是一个好主意。