How fill space between margin-collapsed siblings?

Question

Question 1: Is there any way of automatically having an element fill the space between two margin-collapsed siblings, without adding to the space between the two?

Question 2: If not, is there any way of knowing the actual (after margin collapsing) space between two elements when margins are collapsed?

Background: I have a page with a vertical list of items. These items have different vertical spacing (i.e. margin)s depending on their content -- i.e. an image item has top and bottom margin of 100px, a text item has 50px vertical margin. In order to have good vertical rhythm, margin collapsing is used intentionally.

Now, I need "filler" elements that each take up all the vertical space between each item. For example, between an image item and text item, the "filler" would need to be 100px tall to fill the margin-collapsed space between the two items. Here's an example, with the pink filler filling all the space:

Problem: The list of items is dynamic, so I don't know ahead of time how much space will be in between the items. Because the margins collapse, I can't know ahead of time how tall to make the filler element. I am hoping to avoid having to spell out filler height based on every permutation of item combinations, each with its own value of the spacing between the two item types.

I can't have the filler element affect the space between the two elements (so it's position: absolute). Since it's position: absolute, I don't see a way of anchoring it to both the item above it and below (only to one of them).

Here is an example of manually setting the height for the filler to fill the space: https://jsfiddle.net/41pgv63s/

Is there any other way of being able to fill the space between two elements that are margin-collapsed, without increasing the space between them? I'd like to not have to manually look at the previous/next item and calculate the filler's height based on that. I'm hoping against hope that there's a CSS-only way to fill the space between the two items, so I don't need to know the context between every neighboring item in the list before setting the height of the filler item.

Answer 1

There are many solutions to this, but the quickest came to my mind was this:

.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>