关于底边负边

Question

我在底边进行一些实验，发现了一个我不太了解的小问题。

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

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

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

该框具有相同的宽度和高度，可以渲染，但是我不知道图片的橙色部分代表什么。为什么减少一半？

我看到的一种解释是，下边距是负数，不会移动，从而降低了CSS读取的高度。但是我不明白这句话的含义，什么叫CSS自己读取高度？如果您能理解这一点，您能解释一下吗？

Answer 1

当静态元素的底部具有负边距时，它不会将元素向下移动。取而代之的是，它将所有后续元素拖入主元素，使其重叠。

对该帖子的进一步阅读： https://stackoverflow.com/a/11499018/1945030

Answer 2

CSS边距在具有正值的元素之间创建距离，并开始将它们与负值重叠。该橙色看起来像您的检查器输出，向您显示被检查元素的 <a id="pricing" href="http://google.com">Pricing</a> <a href="http://google.com" target="_blank"><button id="getstarted">Get Started</button></a> <a href="index.html"> <img src="Images/TelosLogo with text.png" href="http://google.com" alt="TelosDesign" id="telosdesignlogo"></a>。当然，如果您使用正数margin，则检查器将在元素下方显示橙色，而负数margin-bottom则由橙色边距指示符表示，该符号显示该元素与元素中的其他元素进行布局后将产生的重叠DOM。