为什么绝对定位的 child 和带边框的 parent 之间有一个小间隙？所有边距、填充和位置都设置为 0

Question

我重新创建了我所面对的现象的精简版。所以 parent 有 position: relative，::after child 有 position: absolute，所有方向值都设置为零。根据我的经验，这通常会将 child 直接延伸到 parent 之上。此外 * { margin: 0; padding: 0 } 设置为安全并确保这不是 margin 或 padding 问题。

我知道我可以将 child 元素 -1px 向左和向上设置...但我有点好奇如果 child 被拉伸为什么会发生这种情况直接在 parent 上面？有没有办法让它与 top、right、bottom 和 left 设置为 0 一起工作？

* {
  margin: 0;
  padding: 0;
}
body {
  padding: 5rem; /* to push div closer to center of snippet window */
}
div {
  transform: scale( 5 ); /* added so displacement can be easily seen */
}
div, div::after {
  display: block;
  position: relative;
  width: 1rem;
  height: 1rem;
  background-color: #eee;
  border-style: solid;
  border-width: 0.1rem;
  border-color: #666;
  border-radius: 0.25rem;
  content: '';
}
div::after {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

<div></div>

来自片段的通知（至少在 Chrome 中）div's 彼此偏移了大约 1 像素。

我在桌面 Chrome 中看到的图片：

为什么这些 div 不直接叠放在一起？

Answer 1

引用是 padding-box 而不是 border-box

If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:

... the containing block is formed by the padding edge of the ancestor. ^ref

然后 值被过度约束 因为你正在定义 left/right/width 并且宽度等于父级（包含块）宽度，因此 right 将被忽略（使用任何值都不会发生任何事情）

If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value. ^ref

与 top/bottom/height 相同的逻辑，其中 bottom 被忽略。

例如，如果您将边框替换为 box-shadow，您将获得完美的重叠：

* {
  margin: 0;
  padding: 0;
}
body {
  padding: 5rem; /* to push div closer to center of snippet window */
}
div {
  transform: scale( 5 ); /* added so displacement can be easily seen */
}
div, div::after {
  display: block;
  position: relative;
  width: 1rem;
  height: 1rem;
  background-color: #eee;
  box-shadow:0 0 0 0.1rem #666;
  border-radius: 0.25rem;
  content: '';
}
div::after {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

<div></div>

为什么绝对定位的 child 和带边框的 parent 之间有一个小间隙？所有边距、填充和位置都设置为 0

Why is there a small gap between an absolutely positioned child and parent with borders? All margins, padding, and positions are set to 0

html

css

css-position