如何单独下移.container元素的边框而不影响.all的outline？

问题原因 #

你碰到的是CSS垂直外边距合并（外边距塌陷）问题：当块级子元素的margin-top和父元素的顶部外边距相邻时，两者会合并成一个外边距，导致父元素.all跟着子元素一起下移，它的outline自然也会同步移动。

实现方法 #

根据你的需求，提供两种针对性方案：

方案1：让.container整体下移，.all的outline保持不动 #

给父元素.all添加以下任意一种样式，就能阻止外边距合并：

• 加padding-top: 1px（微小值，不影响整体布局）
• 加border-top: 1px solid transparent（透明边框，视觉无感知）
• 设置overflow: hidden（注意：父元素内超出范围的内容会被裁剪）

修改后的CSS示例：

.all {
  outline: 3px solid blue;
  height: 100vh;
  outline-offset: 5px;
  position: relative;
  padding-top: 1px; /* 阻止外边距合并 */
}

.container {
  border: 2px solid red;
  height: 600px;
  width: 335px;
  margin-top: 30px;
}

方案2：仅让.container的边框下移，内容位置不变 #

如果需要边框单独向下移动、内部内容保持原位，可以用伪元素模拟边框，再给伪元素设置偏移：

.all {
  outline: 3px solid blue;
  height: 100vh;
  outline-offset: 5px;
  position: relative;
}

.container {
  height: 600px;
  width: 335px;
  position: relative;
}

.container::after {
  content: '';
  position: absolute;
  top: 30px; /* 边框下移的距离 */
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid red;
}

这种方式下，.container的内容位置不变，只有模拟的边框下移30px，.all的outline也不会受影响。

内容的提问来源于stack exchange，提问作者Ozioma Esther