6 ms·
The Rules of Margin Collapse
- wholesomepotato 3y agoSomeone was watching "The Horror Of Margins In CSS" on YT...
- deleted 3y ago[deleted]
- JackMorgan 3y agoI've been in finance too long, my first thought was this is about margin calls on short positions.
- deleted 3y ago[deleted]
- phillipwei 3y agoSame.
- koromak 3y agoOne of those things I've just been subconsciously dealing with for years without ever deciding to actually learn the rules. "Damn it collapsed. Okay padding then"
- adasdasdas 3y agoLooks close enough to the design, ship it.
- marcosdumay 3y agoThe behavior is very obvious if you use them for text. (I have had a few cases of naively stating my margins, the browser exactly displaying what I meant, instead of what I thought I have said, and needing to understand why it worked.) Just don't use margins for layout, I guess.
- layer8 3y agoIt actually makes sense for laying out UI elements. Unfortunately there is no horizontal collapse.
- c-smile 3y agoJust in case, in my Sciter horizontal margins do collapse in horizontal flows: container { flow: horizontal; /* single row */ } container > child { margin:1em; /* will collapse */ } See: https://docs.sciter.com/docs/CSS/flows-and-flexes#flowhorizontal https://docs.sciter.com/docs/CSS/flows-and-flexes#flowhorizo...
- paulddraper 3y ago"IDK man, I just always use flexbox"
- bobthepanda 3y agoFlexbox and grids are the modern saviors of CSS. If only we had started with them.
- SoftTalker 3y agoI put everything in tables.
- indymike 3y agoThis was the way.
- qingcharles 3y agoI just space everything out with
- vidarh 3y agoThere's someone on HN with a blog where everything is split into Spans that then have widths set by JavaScript to precisely lay everything out with pixel precision. I was both impressed and appalled to see it.
- micromacrofoot 3y agoA lot of CSS works this way, until the fateful day you have to fix something and finally spend a day investigating how exactly it works.
- franky47 3y agoSame, though for me it's probably more like: "Add margin. More margin. Moooore margin!! Oh wait.."
- EGreg 3y agoThat’s because too many hedge funds and other speculators have been borrowing on margin, and that leads to collapse. Regardless of what rules are set up to regulate this, rampant speculation and bubbles can always destabilize a market and lead to collapse! You see, what happens is that capitalism rewards the greater risktakers and when the success stories have survivor bias you end up with — oh we’re talking about CSS? Sorry, nevermind.
- Arrath 3y agoWhat do you mean this isn't a new variant of waveform collapse for procedural random generation?
- Pannoniae 3y agoI think the title should definitely be changed to not be misleading ;)
- paulddraper 3y agoThe first paragraph on its own fits quite well, given the average amount of article-reading that happens here.
- recycledmatt 3y agoFigured I was about to read how fierce competition degraded margins in a highly competitive industry - everyone has their biases
- what-no-tests 3y agoMarx' Law of the Falling Rate of Profit[0] [0] - https://link.springer.com/chapter/10.1007/978-1-349-12353-7_1 https://link.springer.com/chapter/10.1007/978-1-349-12353-7_...
- hcarvalhoalves 3y agoCSS is a testament to over-engineering.
- PaulDavisThe1st 3y agoYou should try actually implementing packing, layout and size allocation algorithms sometime, if you have not. We have our own Canvas (aka scene graph) object inside Ardour and attempting to implement all of the above there showed how delightful most of CSS is, and how necessary.
- wharfjumper 3y agoArdour[1] is Digital Audio Workstation software with a GPLv2 licence. Surprised I've never heard of it before. [1] https://ardour.org https://ardour.org
- dukoid 3y agoI wish there would be a "lower level" language all CSS and HTML could be translated to, so both levels could have a "reasonable" formal specification...
- tannhaeuser 3y agoFWIW, while there are unfortunately only very few attempts at formalizing CSS, there's at least an unofficial, unreviewed (?), partial formal semantics for (CSS 2-era) float layout based on z3 SMT and Racket you can take a look at to get a flavor, though it isn't receiving further development. [1]: https://github.com/uwplse/cassius https://github.com/uwplse/cassius [2]: https://pavpanchekha.com/blog/css-floats.html https://pavpanchekha.com/blog/css-floats.html
- crazygringo 3y agoThat would be amazing. It would finally allow for competition in languages/paradigms. And we could write modern languages from scratch.
- deleted 3y ago[deleted]
- twism 3y agoBig ups for using the same colors as Developer Tools to denote margin, padding, etc
- rado 3y agoRelated: new margin-trip property, which helps clear first/last margins https://developer.mozilla.org/en-US/docs/Web/CSS/margin-trim https://developer.mozilla.org/en-US/docs/Web/CSS/margin-trim
- RichieAHB 3y agoNice article! As with all CSS posts there’s always something in there I’ve never used. Today it was `display: flow-root;` [1]. I’ll probably never use it given Grid and Flex but still interesting to see this may have saved some small headaches in the past. [1] https://css-tricks.com/display-flow-root/ https://css-tricks.com/display-flow-root/