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, ormargin-top
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.
I avoid spacing things out using margin-top at all costs. It feels dirty to me. I always use margin-bottom, unless there’s a good reason not to.
I used to be a margin-bottom guy, but recently I went over to the margin-top side when we switched to using sassline. Using margin-top makes for much cleaner styling in the end. No more using last-child on paragraphs to set the margin of the last paragraph to zero. It also comes in handy with headings. Now I set the margins of the heading to zero. The margin-top on the next element will set the proper spacing between heading and copy, but it also allows for the occasional subheading between them without having to override a lot of margins (since in most cases I don’t want a margin between the heading and the subheading).
I would argue that because of the pushy-down nature of the web and cascading styles, applying margin-top makes more sense then margin-bottom. The first element is never really aware of the next element. It’s a lot easier to make an element aware of the preceding element.
I always try to use margin-top. It just feels more logical to me that the element below should distance itself from the elements above, not the other way around.
I’ve been using margin-bottom for a long time, but I’m considering switching to margin-top. The reason is you can then use the
+
selector to define the margin between two adjacent components. For example:I still don’t understand the appeal of margin-bottom over margin-top. Isn’t it logical to work from the top down? Can someone post an example that gives perspective?
I started first using double margin-top and margin-bottom for vertical rythm (using this tool http://soqr.fr/vertical-rhythm/ ), but it is a bit obvious to manage.
Most of the time now, I prefer spacing only on margin-bottom for everything (including vertical rythm).
i just use whats best for what i need at the moment, it depends on the project and you cant say one is more logical then the other, also, using both sometimes when needed, i dont like living in a box
I tend to try and use Heydon Pickering’s Lobotomized Owls technique, or some bastardized derivative it. That ultimately means using a sibling selector and adding a
margin-top
to the second element, and means never having to negate a top or bottommargin
on either the the first or last child in a sequence.This is the thing! +1
+1 for this technique. Been using it for a couple of years now (!!) and still digging it.
I was a margin-bottom person until I switched to using the awesome lobotomized owl (
* + * { margin-top: 1.5em; }
). I wonder what % of the margin-top crowd is similar.I think that maybe for some people the reason to choose top instead of bottom is because you for IE8 and early you cannot do “:last-child” only “:first-child” so tons of examples, libraries, etc, use thoose instead and people may keep using them simply by inertia.
I don’t use
because it has several problems:
– does not work when using flex-direction: column-reverse
– does not work when using the faux-block-technique
Instead, I use the lobotomized owl selector:
For me this gives me the most out of spacing for free.
doesn’t this have the same issues?
Most of the time now, I prefer spacing only on margin-bottom for everything (including vertical rythm).
Like Chris described in the article, I use
margin-bottom
&last-child
for most everything, aside from grids where I use top & bottommargin
, mostly because I’m usually also doing the same for themargin
on the x-axis:I think you made a little typo:
For backward compatibility (IE7 & IE8) without using browser specific CSS, I would prefer margin-top followed by:
I guess I’m old school like that…
Why not use:
or
@Martin
Low/no support for :not in mobile browsers and IE.
@Marc Hoekstra,
Still stuck supporting IE8-? Eeew.
I noticed Bootstrap v4 prefers
margin-bottom
.This preference is specified in the Approach section in documentation. I agree because I also think the web is a “top-down” kinda place. The vertical rhythm seems more consistent, and it’s easier to tell others on the team, “Try your best to avoid
margin-top
.” This standard has been particularly useful when coming back to a project. That said, we do not have clients who need IE8 support. If Microsoft doesn’t support it, we don’t bother.I’ll be a rebel and float the idea of splitting the margin spacing equally between them. ;)
I always use margin-bottom, and embrace collapsing margins. Will always end up with a bunch of margins hanging over the edge of a section together but more often than not that’s exactly what I want.
My 2 cents, I recently had to face this and found that
padding-top
(with the addition ofmargin-top
for separator lines made with aborder
) was a really good match for me.padding
:– because no collapsing risk like
margin
– you can also set a
border-top
as a separator and addmargin-top
on top of thistop
:– because you can use the adjacent sibling selector (
+
) to adjust the value according to the previous element–
:first-child
to remove or reduce the firstpadding-top
if needed. Compatibility (CSS 2) IE7+ http://caniuse.com/#feat=css-sel2 compared to:last-child
(CSS 3) IE9+ http://caniuse.com/#feat=css-sel3I’ve recently been through a few tests to handle this on a project and the experimentation is here : http://codepen.io/OxyDesign/pen/VmEyKq?editors=1100
This experimentation was to test the limits of the idea. I finally chose a slightly different path though. Now the container is
padding: 0 @spacing @spacing @spacing;
and the sections arepadding-top: @spacing;
except the ones that need compensation for line-height they havepadding-top: @spacing - @text-spacing; margin-bottom: - @text-spacing
and so far it works really well.