html - CSS中的负边距仅在容器元素设置了边框或填充时才适用于元素

Question

根据 Mozilla 文档：
https
://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#margin 负边距应该可以正常工作。

但是Mozilla提供的例子已经border设置在.container元素上。
事实证明，负边距仅在容器元素上设置border或设置时才有效。padding

如果容器没有border或没有padding设置，则子元素上的负边距不起作用。

它是错误还是功能？
它的工作方式非常违反直觉。

我在规范https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#mpb-examples中找不到这种行为背后的任何合理解释

我在所有主流浏览器中重现了这种行为：Chrome、Firefox、Safari 和 Edge。

<div class="container">
  <div class="box"></div>
</div>

.container {
  background-color: blue;
  height: 300px;
  width: 500px;
  margin: 200px auto;

/* border or padding is required for negative margin to work */
/* border: 1px solid transparent; */
   padding: 1px;
}

.box {
  background-color: red;
  height: 200px;
  width: 400px;

  margin: -100px auto 0 auto;
}

.container {
  background-color: blue;
  height: 300px;
  width: 500px;
  margin: 200px auto;

/* border or padding is required for negative margin to work */
/* border: 1px solid transparent; */
/* padding: 1px; */
}

.box {
  background-color: red;
  height: 200px;
  width: 400px;

  margin: -100px auto 0 auto;
}

代码笔： https ://codepen.io/adrianbienias/pen/MWJNYyw ?editors=1100

标签： htmlcssborderpaddingmargin