[css-box-4] Trimming collapsed margins in block containers

[sammygill]

https://w3c.github.io/csswg-drafts/css-box-4/#margin-trim-block

I wanted to get some clarification on how this property is supposed to interact with collapsed margins. It seems like the intention of the property is to control spacing siblings in relation to their container, but the way that the collapsed margin portion of it is phrased seems to indicate that it would modify the location of the container itself.

Oftentimes, margins are desired between siblings, but not at the start/end of the container where spacing can be controlled with padding. This property allows the container to trim the margins of its children where they adjoin the container’s edges.

For block containers specifically, margin-trim discards:

• The block-start margin of a block-level first child, when trimming at the block-start edge.
• The block-end margin of a block-level last child, when trimming at the block-end edge.
• Any margin collapsed with these margins.

Given the above and the following example:

<div style="border: solid red;"></div>
<div style="outline: solid">
 <div class="container">
   <div></div>
   <div></div>
   <div></div>
   <div style="margin-bottom: 100px;"></div>
  </div>
</div>
<div style="border: solid blue;"></div>

If block-end were specified on container it seems like margin would get collapsed all the way down to the bottom of the container, but would ultimately get trimmed. This would then change the spacing between the blue and red divs.

Is this the correct behavior that should occur if the property were implemented properly? Should it be modifying the margins of the container at all? It would be very appreciated to get some clarity on how and when exactly the trimming is supposed to occur in these types of scenarios

[fantasai]

Good question. It should not affect the margins of the element itself or its ancestors, only its contents.