如何填补边缘崩溃的兄弟姐妹之间的空白？

Question

问题1:有什么方法可以让元素自动填充两个边缘折叠兄弟姐妹之间的空格，而不增加两者之间的空格呢？

问题2:如果没有，有什么方法可以知道两个元素之间的实际空间(在边距崩溃后)，当边距被折叠时？

背景：--我有一个带有垂直项目列表的页面。这些项目有不同的垂直间距(即边距)，这取决于它们的内容--即图像项具有100px的顶部和底部边距，文本项具有50px垂直边距。为了有良好的垂直节奏，故意使用边缘塌陷。

现在，我需要“填充”元素，每个元素占据每个项目之间的所有垂直空间。例如，在图像项和文本项之间，“填充”需要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>

​