Thread by @adamwathan

I’ve recently entered a phase of CSS experience I didn’t know existed where, after having extreme confidence in my opinions about when to use margin vs. padding for half a decade, I am now questioning every single thing I know about when to use margin vs. padding 😐

Here's one real-world example...

Here, should the space between the "This information..." paragraph and the form below come from padding on the form heading (left), or margin between the form and the form heading (right)?

My gut would say the left option, but when you see the same design at the next breakpoint it becomes less clear, because now a divider appears between form sections and it seems like the vertical padding should live on the entire container, with margin between elements:

In theory it sounds easy to say "padding is for internal spacing, margin is for external spacing", but the hard part is trying to determine if some given block of space should be modelled as internal or external in the first place.

Pretty sure just making this border its own component that you just stuff in between things to separate them is a 100x better workflow than adding a top/bottom border to the containers themselves.

Stole this from you @markdalgleish and now my life is better 😎