The Rules of Margin Collapse(joshwcomeau.com)
joshwcomeau.com
The Rules of Margin Collapse
https://www.joshwcomeau.com/css/rules-of-margin-collapse/
10 comments
The 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.
Just don't use margins for layout, I guess.
It actually makes sense for laying out UI elements. Unfortunately there is no horizontal collapse.
Just in case, in my Sciter horizontal margins do collapse in horizontal flows:
container {
flow: horizontal; /* single row */
}
container > child {
margin:1em; /* will collapse */
}
Same, though for me it's probably more like:
"Add margin. More margin. Moooore margin!! Oh wait.."
"Add margin. More margin. Moooore margin!! Oh wait.."
A 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.
"IDK man, I just always use flexbox"
Flexbox and grids are the modern saviors of CSS. If only we had started with them.
I put everything in tables.
I just space everything out with
There'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.
I was both impressed and appalled to see it.
This was the way.
Looks close enough to the design, ship it.
Related: new margin-trip property, which helps clear first/last margins https://developer.mozilla.org/en-US/docs/Web/CSS/margin-trim
Nice 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/
[1] https://css-tricks.com/display-flow-root/
Figured I was about to read how fierce competition degraded margins in a highly competitive industry - everyone has their biases
Marx' Law of the Falling Rate of Profit[0]
[0] - https://link.springer.com/chapter/10.1007/978-1-349-12353-7_...
[0] - https://link.springer.com/chapter/10.1007/978-1-349-12353-7_...
That’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.
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.
The first paragraph on its own fits quite well, given the average amount of article-reading that happens here.
I think the title should definitely be changed to not be misleading ;)
What do you mean this isn't a new variant of waveform collapse for procedural random generation?
Big ups for using the same colors as Developer Tools to denote margin, padding, etc
I've been in finance too long, my first thought was this is about margin calls on short positions.
Same.
[deleted]
I 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...
FWIW, 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
[2]: https://pavpanchekha.com/blog/css-floats.html
[1]: https://github.com/uwplse/cassius
[2]: https://pavpanchekha.com/blog/css-floats.html
That would be amazing.
It would finally allow for competition in languages/paradigms.
And we could write modern languages from scratch.
It would finally allow for competition in languages/paradigms.
And we could write modern languages from scratch.
[deleted]
CSS is a testament to over-engineering.
You 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.
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.
Ardour[1] is Digital Audio Workstation software with a GPLv2 licence. Surprised I've never heard of it before.
[1] https://ardour.org
"Damn it collapsed. Okay padding then"