css - 负底边距有什么影响

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

Padding - 简单地说，在您的元素内创建一个不可见的边框。您为其提供元素内部的空间(围绕内容)。

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

所以在这里你告诉，first 的任何内容必须距离每边 20px(每边因为你没有提供任何声明，如 padding-top)

边距 - 另一方面创造了相反的效果，它在你的元素周围创造了空间。

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

所以这个说第二个 block 在底部外面有一个空间。它定义为负数，这意味着以下元素 float 在您的元素中。

这解释得很糟糕:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model