margin-bottom or margin-top | CSS-Tricks

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-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.

Comments

Gareth

# December 6, 2016

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.

Bram

# December 6, 2016

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.

Bruno Babic

# December 6, 2016

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.

alberto

# December 6, 2016

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:

.header + .search-bar {
  margin-top: 0;
}

goose

# December 6, 2016

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?

Nico

# December 6, 2016

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).

None

# December 6, 2016

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

Jason

# December 6, 2016

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 bottom margin on either the the first or last child in a sequence.

Caio

Permalink to comment# December 6, 2016

This is the thing! +1
Tyler Sticka

Permalink to comment# December 9, 2016

+1 for this technique. Been using it for a couple of years now (!!) and still digging it.

Mark Root-Wiley

# December 6, 2016

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.

Adrian

# December 6, 2016

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.

Dan

# December 6, 2016

I don’t use

*:last-child {
  margin-bottom: 0;
}

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:

* + * {
  margin-top: 2em;
}

For me this gives me the most out of spacing for free.

grilly

Permalink to comment# December 7, 2016

doesn’t this have the same issues?

faizanali

# December 6, 2016

Most of the time now, I prefer spacing only on margin-bottom for everything (including vertical rythm).

Dustin Horton

# December 6, 2016

Like Chris described in the article, I use margin-bottom & last-child for most everything, aside from grids where I use top & bottom margin, mostly because I’m usually also doing the same for the margin on the x-axis:

$grid--item-margin-y: 10px;

.grid {
  margin: -$grid--item-margin-y 0;
}

.grid--item {
  margin: $grid--item-margin-y 0;
}

<div class="grid">
  <div class="grid--item"></div>
  <div class="grid--item"></div>
  <div class="grid--item"></div>
  […]
</div>

Michael Berman

# December 6, 2016

I think you made a little typo:

do you generally go for margin-bottom on the top element, or margin-bottom on the top element?

Marc Hoekstra

# December 7, 2016

For backward compatibility (IE7 & IE8) without using browser specific CSS, I would prefer margin-top followed by:

.item:first-child {
  margin-top: 0;
}

I guess I’m old school like that…

Martin

# December 7, 2016

Why not use:

.item:not(:last-child) {
    margin-bottom: 1em;
}

.item:not(:first-child) {
    margin-top: 1em;
}

Marc Hoekstra

Permalink to comment# December 8, 2016

@Martin

Why not use X

Low/no support for :not in mobile browsers and IE.
Name Required

Permalink to comment# December 8, 2016

@Marc Hoekstra,
Still stuck supporting IE8-? Eeew.

Gabe

# December 9, 2016

I noticed Bootstrap v4 prefers margin-bottom.

Avoid margin-top. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of margin is a simpler mental model.

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.

Uncle Jesse

# December 9, 2016

I’ll be a rebel and float the idea of splitting the margin spacing equally between them. ;)

Jacob Peattie

# December 13, 2016

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.

OxyDesign

# January 5, 2017

My 2 cents, I recently had to face this and found that padding-top (with the addition of margin-top for separator lines made with a border) 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 add margin-top on top of this

top :
– because you can use the adjacent sibling selector (+) to adjust the value according to the previous element
– :first-child to remove or reduce the first padding-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-sel3

I’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 are padding-top: @spacing; except the ones that need compensation for line-height they have padding-top: @spacing - @text-spacing; margin-bottom: - @text-spacing and so far it works really well.

This comment thread is closed. If you have important information to share, please contact us.