[HN Gopher] The Rules of Margin Collapse
       ___________________________________________________________________
        
       The Rules of Margin Collapse
        
       Author : ayoreis
       Score  : 109 points
       Date   : 2023-09-12 18:29 UTC (4 hours ago)
        
 (HTM) web link (www.joshwcomeau.com)
 (TXT) w3m dump (www.joshwcomeau.com)
        
       | twism wrote:
       | Big ups for using the same colors as Developer Tools to denote
       | margin, padding, etc
        
       | JackMorgan wrote:
       | I've been in finance too long, my first thought was this is about
       | margin calls on short positions.
        
         | phillipwei wrote:
         | Same.
        
         | [deleted]
        
       | koromak wrote:
       | One 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"
        
         | micromacrofoot wrote:
         | 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.
        
         | adasdasdas wrote:
         | Looks close enough to the design, ship it.
        
         | paulddraper wrote:
         | "IDK man, I just always use flexbox"
        
           | bobthepanda wrote:
           | Flexbox and grids are the modern saviors of CSS. If only we
           | had started with them.
        
           | SoftTalker wrote:
           | I put everything in tables.
        
             | indymike wrote:
             | This _was_ the way.
        
         | franky47 wrote:
         | Same, though for me it's probably more like:
         | 
         | "Add margin. More margin. Moooore margin!! Oh wait.."
        
         | marcosdumay wrote:
         | 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.
        
           | layer8 wrote:
           | It actually makes sense for laying out UI elements.
           | Unfortunately there is no horizontal collapse.
        
       | hcarvalhoalves wrote:
       | CSS is a testament to over-engineering.
        
         | PaulDavisThe1st wrote:
         | 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.
        
       | dukoid wrote:
       | 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...
        
         | crazygringo wrote:
         | That would be _amazing_.
         | 
         | It would finally allow for competition in languages/paradigms.
         | 
         | And we could write modern languages from scratch.
        
         | tannhaeuser wrote:
         | 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
        
       | EGreg wrote:
       | 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.
        
         | Pannoniae wrote:
         | I think the title should definitely be changed to not be
         | misleading ;)
        
         | paulddraper wrote:
         | The first paragraph on its own fits quite well, given the
         | average amount of article-reading that happens here.
        
         | Arrath wrote:
         | What do you mean this isn't a new variant of waveform collapse
         | for procedural random generation?
        
       | rado wrote:
       | Related: new margin-trip property, which helps clear first/last
       | margins https://developer.mozilla.org/en-US/docs/Web/CSS/margin-
       | trim
        
       | recycledmatt wrote:
       | Figured I was about to read how fierce competition degraded
       | margins in a highly competitive industry - everyone has their
       | biases
        
       | RichieAHB wrote:
       | 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/
        
       | wholesomepotato wrote:
       | Someone was watching "The Horror Of Margins In CSS" on YT...
        
       ___________________________________________________________________
       (page generated 2023-09-12 23:01 UTC)