关于负利润底部[重复]

Question

这个问题在这里已有答案：

• How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)? 7个答案

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

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

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

当我将它设置为margin-bottom：-50px时，它看起来像这样。 qazxsw poi

盒子具有相同的宽度和高度，可以渲染，但我不明白图片的橙色部分代表什么。为什么减少一半？

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

Answer 1

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

进一步阅读这篇文章：

Answer 2

CSS边距创建具有正值的元素之间的距离，并开始将它们与负值重叠。那橙色看起来像你的检查员输出显示检查元素的https://stackoverflow.com/a/11499018/1945030。当然，如果使用正margin，检查员将在元素下方显示橙色，而负margin-bottom由橙色边距指示符表示，显示一旦此元素与DOM中的其他元素进行布局将导致重叠。