Webmasters Gallery

I posted a context-less poll on Twitter, just for fun.

ok lets do this

— Chris Coyier (@chriscoyier) December 1, 2016

The implied context, as most CSS nerds could probably suspect, is:

To space elements out vertically from each other, do you generally go for margin-bottom on the top element, or margin-bottom on the bottom element?

61% of ~2,000 votes said margin-bottom. I figured it would win, but I didn’t suspect so narrowly. The web feels like a push-downy kind of medium and I’d say it feels more logical/natural to apply spacing to the first element rather than second.

One way or another, it’s common to have to remove the spacing from one side or the other. Kinda like:

.module > *:last-child {
  margin-bottom: 0;
}

/* or */

.module > *:first-child {
  margin-top: 0;
}

But don’t read too much into that. There are a million ways to handle structure, spacing, selectors, and all that. I just mean to say: it’s a horse apiece. One isn’t any better than the other. They don’t need to be mutually exclusive either, but remember how they collapse.

Greg Whitworth pointed out that margin-top actually has a narrow edge in “a Bing-powered can of 1,070,510 pages”.

But as Estelle Weyl pointed out, that’s mostly coming from people resetting those values, not actively using them for spacing. It would be interesting to see that same data with non-zero values.

margin-bottom or margin-top is a post from CSS-Tricks