负底边距有啥影响

Posted 2023-03-06

【中文标题】负底边距有啥影响

【英文标题】：What's the impact of the negative bottom margin负底边距有什么影响

【发布时间】：2018-01-23 06:38:27

【问题描述】：

首先，这里是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 的效果。但我不明白它是如何工作的。你能解释一下吗？

【问题讨论】：

在块元素上可以使用负边距。第一个是填充的，第二个是填充的，所以仍然可以。在第二个中您设置了负边距，在第三个中您添加了它，因此完全没有必要。检查将 30 添加到第三个时会发生什么：jsfiddle.net/sm4Lf591

您示例的文本内容已经提到了答案 - 折叠边距。 w3.org/TR/CSS21/box.html#collapsing-margins

您应该查找“边距折叠”。信息量很大。

【参考方案1】：

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

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

所以你在这里告诉你，任何第一个内容都必须距离每一边 20px（每一边因为你没有提供任何像 padding-top 这样的声明）

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

.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