Html 在CSS中，四个边上的负边距会做什么？

如果我这样写：

#element {
  margin-top: -50px;
}

根据一般规则，它会将元素向上移动50像素

最近，我无意中使用了以下代码：

.elements {
  margin: -50px;
}

所以我有了这些

标签，一个在另一个下面，通过写

边距：-50px
但回想起来，我真的不明白这是怎么回事。元素的大小没有改变（据我所知，因为它们包含子元素，并且子元素之间的距离也更近），而且它们似乎没有放大大小或任何东西

我在网上做了一些研究，但我所能找到的最多只是一个或两个方面的负利润

对此有何解释？到底发生了什么？可能是因为我在使用Google Chrome，而在其他浏览器中可能什么都没有发生？
边距不是添加到元素的外观上，而是添加到元素的边界上，因此，基本上您的元素看起来像是
200x200
，但它的边界等于
100x100
元素的边界，因为您从每一侧减去
50px
。自己试试看：


HTML:

我在主体上添加了一个填充物，使元素向下推，以便您可以看到它们造成的重叠。更新后，您可以看到结果中正方形的边界。
所有边上的边距均被删除，使div之间的边距变小。真的很简单。@r3wt是的，但这不会扩展元素吗？在我的例子中，这不会发生。不，它不会扩展元素，除非它们具有基于%的宽度。谢谢你的回答。
<div class="e1"><div></div></div>
<div class="e2"><div></div></div>

body {
    padding: 100px;
}
div {
    width: 200px;
    height: 200px;
    float: left;
    margin: -50px;
}

.e1 {
    background: red;
}

.e2 {
    background: yellow;
}

.e1>div, .e2>div {
    width: 100px;
    height: 100px;
    outline: 1px solid blue;
    margin: 50px;
}