Collapsing margins was a sane default in the original use case of CSS - text documents with sections and headers. But it is not intuitive when working with GUI components.
Even when I'm writing HTML documents, collapsing margins doesn't make sense. I'm sure there's some historical reason here, but it's been a surprising default as long as people have been writing CSS. `thing+other-thing { margin: 0; }` (or `thing > other-thing:first-child { margin: 0; }`) is a lot more explicit and less likely to be surprising. (And, yes, I've been writing HTML+CSS since CSS was first released)
Part of the reasoning here is that I’ve fixed a lot of style issues where someone allowed the content of an element to overflow its boundaries. While this might be ok in some contexts, it creates a lot of weird edge-cases in any moderately complicated page and the cause of the issue is invisible. With cropping, you can see the problem much more easily because the content is just cropped or otherwise cut out.