边距顶部导致父 div 下降 [重复]

Question

.d1 {
  background-color: lightblue;
}

.d2 {
  background-color: yellow;
  margin-top: 20px;
}

<div class="d1">
  <div class="d2">Test</div>
</div>

在这个简单的例子中，d1 是d2 的父元素。但是d2 会导致它自己和d1 拥有margin-top 的20px。为什么会这样？

Answer 1

它的简单逻辑是，当您使用父 div 和子 div 时，父 div 将被子 div 样式覆盖，因为父将检查所有内部样式并给您输出。

示例： 如果您在 d1 和 d2 中都使用margin-top: 20px;，它将为您提供前 40px 的输出。