Great, so we both on the same page in regard to the principle of components' responsibility boundary.

Now it might be your turn to explain more about why we *have to* do it with pure CSS (and with margin)? Does it sound very dogmatic? Why we can't rethink if it is the correct / best way to represent spacing *between* elements?

The linked articles on the bottom of the story should already prove that empty divs are harmless, and I found many frameworks / libraries already adopted this pattern / idea (will update the story and list them on the bottom).

Adding space via "magin" naturally indicates that the space has to be attached so another "solid entity". To represent space between elements using "margin", you also have to decide which element should you attach that space on (margin-top vs. margin-bottom, etc).

Then my quesiton is: why space can't be unattached from other elements, and become a basic building block?

Space as a foundamental building block is extremely common outside of Web. A very classic example is that when you customising a software's toolbar, you will usually get a "space" component there.

If we accept that Space can be a foundamental building block, then spacers are not "extra DOM element" -- spacer is now a solid and self-contained thing / element that clearly expressed its intention in the DOM tree, it does not belong to any sibling elements, and you can even add other properties on it as a bonus (e.g., flex-grow/shrink, background, etc).

Aparently I am not alone with this idea, and there are more and more people realizing the problem of "margin" and the needs of spacer component after mordern frameworks started componentizing the world of Web.

Really, why not spacer? Despite the dogmatic reasons :)