关于负边距-底部[重复]

Question

我在margin-bottom上做了一些实验，发现了一个我不太明白的小问题。

.left {
  width: 60px;
  height: 100px;
  background-color: yellow;
}

<div class="left">Coding Coding Coding Coding Coding</div>

当我将它设置为 margine-bottom: -50px 时，它看起来像这样。

盒子的宽高一样，可以渲染，但是不明白图片的橙色部分代表什么。为什么减半？

我看到的一种解释是，margin-bottom 是负数并且不会移动，从而降低了它自己的高度以供 CSS 阅读。但是我不明白这句话的意思，什么叫自己的高度供CSS阅读？如果你能理解这一点，你能解释一下吗？

Answer 1

当静态元素在底部被赋予负边距时，它不会将元素向下移动。相反，它将任何后续元素拉入主元素中，并与之重叠。

进一步阅读这篇文章： https://stackoverflow.com/a/11499018/1945030

Answer 2

CSS 边距在具有正值的元素之间创建距离，并开始与负值重叠。那个橙色看起来像你的检查器输出，显示了被检查元素的margin。当然，如果您使用正值 margin-bottom，检查器将在元素下方显示橙色，而负值 margin-bottom 由橙色边距指示器表示，显示一旦该元素与 DOM 中的其他元素布局时将产生的重叠。