Question

首先，这是html：

<div class="first">
    <div class="second">
        <div class="third">
           Hello, margin collapsing!
        </div>
    </div>
</div>

然后是CSS：

.first {
  background-color: red;
  padding: 20px;
}

.second {
  background-color: green;
  margin-bottom: -20px;
}

.third {
  background-color: yellow;
  margin-bottom: 20px;
}

在最终布局中，第三个div看起来没有底边距。我知道它必须是底部边距为负的第二个div的效果。但我不明白它是如何运作的。你能解释一下吗？

Answer 1

填充 - 简单地说，在元素中创建一个不可见的边框。你提供元素内部的空间（围绕内容）。

.first {
  background-color: red;
  padding: 20px;
}

所以在这里你告诉我，任何第一个内容都是每边20px（每一方都因为你没有提供任何声明，如padding-top）

保证金 - 另一方面创造了相反的效果，它会在元素周围创造空间。

.second {
  background-color: green;
  margin-bottom: -20px;
}

所以这个人说第二个街区底部有一个空间。它定义为负数，表示以下项目浮动在元素中。

这很难解释：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

负底边的影响是什么？

1 个答案: