html - div 元素不起作用

Question

我有两个div元素和 nav > nav_1 。当我添加margin-top:20px;时至nav , nav下降20px根据 body ，这是正确的。
但是当我添加这个 margin-top:20px;至nav_1 , nav_1下降20px与 nav根据 body 。
为什么 ？ nav_1 nav 的元素它应该按照 nav 移动.
在这个问题中，我正在寻找解释

.nav {
  height: 500px;
  width: 500px;
  background-color: black;
  margin-top:50px;
}
.nav .nav_1 {
  height: 50px;
  width: 50px;
  background-color: blue;
  margin-top:50px;
}

<div class="nav">
  <div class="nav_1">
  </div>
</div>

Answer 1

这是“利润崩溃”机制的一个案例。简而言之，父元素和子元素的边距被折叠成单个边距，其大小等于其相应边距的最大值​​。有多种方法可以禁用这种行为，例如向父元素添加边框或填充。您可以在 mdn article 阅读有关该机制的更多信息。 .