Horizontal margin does not collapse (surprise), width full n border

[sanjarcode]

https://www.joshwcomeau.com/css/rules-of-margin-collapse/#only-vertical-margins-collapse-1 (other parts of this article may be wrong)

This is good to know.

Padding and borders work as expected. No surprises there.

---

Also, with w-100%, borders don't work as expected, i.e. because borders are additive, and w-full is applied to w, not W (calculated/used value). The fix is simple, but it's an indirect one. Stop using width-100% for "leftover space" (its not semantically correct or extensible).

The whole issue is regarding setting the width to all of the "left-over" space.
And w-100% is the wrong operator here, the correct one is display: block (if you're flex, you have block already)
So doing full width with border inside is simple, set display: block.

display: block; // or no need if display flex already
border: 10px solid black;

Sandbox for both things: https://codesandbox.io/p/sandbox/margin-vs-padding-4rwyjw

[sanjarcode]

Todo: is this horizontal collapse absent inconsequential?