负边距增加了不需要的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额外间距来自哪里？

将负边距更改为-11px，它可以正常工作（无间隙）。

你也可以删除所有边距并与上面的“负面+正面”情景进行比较，看看两者是如何不相同的。

谢谢。

修改

在搞清楚之后，我只是想分享以下内容，以防对未来的访问者有所帮助。

1. 应用 - / + 10px后，内部div回到它开始时的确切位置。只是以前在body元素的内容边和内部div的 margin edge 之间的边界（即外部div的边框）已经移位了与外部div一起向左10px。因此，它应该没有任何奇怪的原因。
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， 如果您移除1px边框的.outer宽度，则还会删除间隙：

Answer 2

对不起，错误的回答，我正急着写......数学：

(-10pxMargin + 10pxMargin + 1pxBorder) = 1

你需要

(-11pxMargin + 10pxMargin + 1pxBorder) = 0

如果这一点足够清楚，请告诉我，问题是边距不包括边界。

Answer 3

额外的像素来自.outer元素。

.outer {

  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>

Answer 4

而不是使用border外部元素。您可以使用outline。

.outer {
  outline: 1px solid red;
}

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

body {
  border: 1px solid blue;
}

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