3 ms·

I agree that spacers are better than margins (and sometimes better than paddings, when people use paddings as margins). Since whitespace is almost always betwee

I agree that spacers are better than margins (and sometimes better than paddings, when people use paddings as margins). Since whitespace is almost always between A and B, ideally the piece of code defining whitespace would be between the pieces of code that are responsible for A and B. For example, it feels nice to define margin or padding on a element, but what does that mean - distance between two paragraphs? Between paragraph and heading? Between paragraph and bulleted list? Using spacers seems like the only way out of this madness.

seanwilson 7y ago
> For example, it feels nice to define margin or padding on a element, but what does that mean - distance between two paragraphs? Between paragraph and heading? Between paragraph and bulleted list? Using spacers seems like the only way out of this madness. Can you explain what spacers are and why they'd be better for this example? Why not use CSS rules that say e.g. "use 1em spacing between p tags", "adding 2em spacing between h1 tags and p tags"?
- cousin_it 7y ago
 Yeah, my bad. I realized after writing that comment that pairwise spacing is possible in CSS: p+p{margin-top:1em} h1+p{margin-top:2em} This says more or less directly "1em between p and p, 2em between h1 and p". The values can be changed independently, with no need for collapsing margins and so on. It's a bit unusual though.
 - seanwilson 7y ago
 That's the approach I use though. Spacer divs is going to lead to lots of repetition and attaching the margin to a single element always leads you to having to undo it when there's an exception later.
coffeefirst 7y ago
It means minimum distance. A key feature is margin is it can collapse. So if paragraphs have 1rem between them, and headings have 2rem above and 1rem below, you won’t wind up with 3rem between the paragraph and the following heading. Padding adds together, and space mechanisms seem like overkill when css can already do the thing in a straightforward way. What’s befuddling to me about these threads is that they keep trying to make an absolute case. It’s true, I use margin less now that I have grid gap, but there’s still a place for it.
- lolc 7y ago
  Most people don't understand collapsing margins. I know I don't. I always have to read up when I deal with margins. And protip: Whenever you have a CSS problem, think: "Oh, I'll just use negative margins!"
uk_programmer 7y ago
> For example, it feels nice to define margin or padding on a element, but what does that mean - distance between two paragraphs? Between paragraph and heading? Between paragraph and bulleted list? Using spacers seems like the only way out of this madness. I don't want to be rude but you are completely misunderstanding what CSS and HTML are supposed to do. 1) The tag denotes that the content in the element is a paragraph in the document. 2) The styling is just tell the client (which is typically a browser) how the element is supposed to be styled. It isn't supposed to mean anything in relation to other elements and it isn't supposed to convey meaning. Generally wherever possible you should try to separate the markup and its styling. You can't always do that, but you should try to.

seanwilson 7y ago

cousin_it 7y ago
Yeah, my bad. I realized after writing that comment that pairwise spacing is possible in CSS: p+p{margin-top:1em} h1+p{margin-top:2em} This says more or less directly "1em between p and p, 2em between h1 and p". The values can be changed independently, with no need for collapsing margins and so on. It's a bit unusual though.
- seanwilson 7y ago
  That's the approach I use though. Spacer divs is going to lead to lots of repetition and attaching the margin to a single element always leads you to having to undo it when there's an exception later.

coffeefirst 7y ago

It means minimum distance. A key feature is margin is it can collapse. So if paragraphs have 1rem between them, and headings have 2rem above and 1rem below, you won’t wind up with 3rem between the paragraph and the following heading. Padding adds together, and space mechanisms seem like overkill when css can already do the thing in a straightforward way. What’s befuddling to me about these threads is that they keep trying to make an absolute case. It’s true, I use margin less now that I have grid gap, but there’s still a place for it.

lolc 7y ago
Most people don't understand collapsing margins. I know I don't. I always have to read up when I deal with margins. And protip: Whenever you have a CSS problem, think: "Oh, I'll just use negative margins!"

uk_programmer 7y ago

> For example, it feels nice to define margin or padding on a element, but what does that mean - distance between two paragraphs? Between paragraph and heading? Between paragraph and bulleted list? Using spacers seems like the only way out of this madness. I don't want to be rude but you are completely misunderstanding what CSS and HTML are supposed to do. 1) The tag denotes that the content in the element is a paragraph in the document. 2) The styling is just tell the client (which is typically a browser) how the element is supposed to be styled. It isn't supposed to mean anything in relation to other elements and it isn't supposed to convey meaning. Generally wherever possible you should try to separate the markup and its styling. You can't always do that, but you should try to.