Comment by Chabsff

2 years ago

To be fair, it makes sense when you look at the use-case that spawned margins in the first place: <h1/><h2/>, <h1/><p/>, <h3/><h4/>, <h3/><p/>, etc... It does make for a fairly elegant way of handling all of those permutations with a reasonable amount of attributes. That comes in to play particularly in cases where you don't have control over which will show up in the wild (e.g. when dealing with Markdown content)

Even for text flows, the margins should be derived from properties of the container.

Traditional graphic designers creating print layouts didn’t use randomly different margins for elements on a page. The margins were derived from a grid system that was applied to the entire page. Within that system, the margin between a body paragraph and a header might be (for example) two grid squares, while the margin between body paragraphs would be one grid square.

CSS designers should have thought more conceptually about the HTML page as a container for text elements. Instead they just created a whole bunch of properties that allow elements themselves to define any spacing anywhere in any units, then tried to patch up the conceptual mess with hacks like margin collapse.

There is no way to define proper rhythm hierarchy (multiple paragraphs with own titles with greater gravity) with only collapsing margins in CSS it's almost always hacks with fist/last children.