html - 负边距添加不需要的 1px 额外间距

Question

考虑以下 HTML 和 CSS

.outer {
  border: 1px solid red;
  margin-left: -10px;
}

.inner {
  border: 1px solid black;
  width: 50px;
  margin-left: 10px;
}
body {
  border: 1px solid blue;
}

<div class="outer">
  <div class="inner">
    inner
  </div>
</div>

内部和外部 div 之间左侧 1px 的额外间距来自哪里？

将负边距更改为 -11 像素，它可以正常工作(没有间隙)。

也可以去掉所有边距，与上面的“负+正”场景对比，看看两者有何不同。

谢谢。

---

编辑

弄清楚后，我只想分享以下内容，以防对以后的访问者有所帮助。

1. 在应用 -/+10px 后，内部 div 回到了它开始时的确切位置。只是以前位于 body 元素的 content 边缘 和内部 div 的 margin 边缘 之间的边界(即外部 div 的边界)发生了变化向左 10px 和外部 div。因此，它可以正常工作，没有任何异常。
2. 子框的边距自然适用于其父框的内容边缘。这就是盒子模型 的工作原理。无法使用 box-sizing: border-box
更改该行为
3. 消除差距的可能解决方案包括(但不限于):
   • 将 CSS 转换为 SCSS，将边框宽度存储在一个变量中，并从父项的边距中减去该变量。 (没有必要转换为 SCSS 并使用变量，但它使样式表更易于维护和更新。)
   • 使用 JavaScript 完全消除对负边距的需求
   • 在父 div 上使用轮廓而不是边框​​

Answer 1

我认为这与 .outer 边框有关。您可以在下面看到，当红色边框向左移动 10px 时，如果它没有向左移动(当边距为 0 时)，就会有一个间隙)。

因为 .inner div 是相对于 .outer div 的，所以它不会“填满” 1px 间隙通过将 .outer 向左移动 10 个像素来创建。

在这里你可以看到差距。 (看起来像2个像素，因为页面放大了200%)

---

使用额外信息进行编辑:

额外的“证据”表明额外的空间来自.outer div， 如果您删除 .outer 边框的 1px 宽度，您也删除了间隙: