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;
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 isdisplay: block
(if you're flex, you have block already) So doing full width with border inside is simple, set display: block.Sandbox for both things: https://codesandbox.io/p/sandbox/margin-vs-padding-4rwyjw