search

sanjar-notes / web_dev_fundamentals

The basics - HTML, CSS, Javascript and more
https://sanjar-notes.github.io/web_dev_fundamentals/
3 stars 0 forks source link

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

Open sanjarcode opened 6 months ago

sanjarcode commented 6 months ago

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 commented 6 months ago

Todo: is this horizontal collapse absent inconsequential?