如何填充边缘折叠的兄弟姐妹之间的空间？

Question

问题 1： 有没有办法让一个元素自动填充两个边缘折叠的兄弟之间的空间，而不增加两者之间的空间？

问题 2：如果没有，有没有办法知道当边距折叠时两个元素之间的实际（边距折叠后）空间？

背景：我有一个包含垂直项目列表的页面。这些项目具有不同的垂直间距（即边距），具体取决于它们的内容——即图像项目的顶部和底部边距为100px，文本项目的垂直边距为50px。为了有良好的垂直节奏，故意使用了margin collapsing。

现在，我需要“填充”元素，每个元素占据每个项目之间的所有垂直空间。例如，在图像项和文本项之间，“填充”需要为100px 高才能填充两个项之间的边距折叠空间。这是一个示例，粉色填充物填充了所有空间：

问题：项目列表是动态的，所以我不知道项目之间会有多少空间。因为边距塌陷，我无法提前知道填充元素的高度。我希望避免必须根据项目组合的每个排列来拼出填充高度，每个组合都有自己的两种项目类型之间的间距值。

我不能让填充元素影响两个元素之间的空间（所以它是position: absolute）。因为它是position: absolute，所以我看不到将它锚定到它上面和下面的项目的方法（仅限于其中一个）。

这里是手动设置填充器高度以填充空间的示例：https://jsfiddle.net/41pgv63s/

有没有其他方法可以填充两个边缘折叠的元素之间的空间，而不增加它们之间的空间？我不想手动查看上一个/下一个项目并据此计算填充物的高度。我希望有一种纯 CSS 的方式来填充两个项目之间的空间，因此在设置填充项目的高度之前，我不需要知道列表中每个相邻项目之间的上下文。

Answer 1

对此有很多解决方案，但我想到的最快的是：

.in-between-dweller {
  background-color: rgba(255,128,255, 0.3);
  position: absolute;
  bottom: -100%;
  left: 0;
  height: 100%;
  width: 100%;
}

.container {
  position: relative;
}

.box {
  height: 100px;
  border: 1px solid #AAA;
  background-color: #FAFFBB;
}

.one {  
  margin-bottom: 50px;
}

.two {  
  margin-top: 100px;
}

.in-between-dweller {
  background-color: rgba(255,128,255, 0.3);
  position: absolute;
  bottom: -100%;
  left: 0;
  height: 100%;
  width: 100%;
}

<div class="container">
  <div class="box one">Box One (margin-bottom: 50px)</div>
  <div class="in-between-dweller">I'm supposed to cover all the space between the two boxes...</div>
</div>
<div class="container">
  <div class="box two">Box Two (margin-top: 100px)</div>  
</div>