Why a drawbridge, you ask? Well, 1) images of margins are incredibly boring, and 2) it's better to go up than down.

Why a drawbridge, you ask? Well, 1) images of margins are incredibly boring, and 2) it's better to go up than down.

Chris Coyier pointed out a problem that a lot of us in the web community experience but few of us probably notice: Spacing the Bottom of Modules or, rather, dealing with too much space at the bottom of a content module.

While Chris uses margin-bottom and :last-child to get rid of excess space at the bottom of a module, I think using margin-top and :first-child (if you need it) might be a better approach. Here’s a Fork of Chris’ original Codepen example.

Like commenter Allan said on the CSS-Tricks post, you generally know what’s going to be at the top of a module, and it’s a lot easier to plan for what comes first rather than what comes last.  And if you do need to make specific changes to the first item in a module, :first-child has support back to IE7, while last-child isn’t even supported in IE8.

Check out this Pen!

The Philosophy of Margin-Top

If you want an extended edition for my recommendations, keep reading.

  1. Why we use margin-top in content styles: if you’re styling a header tag, for instance, you would probably want more space above the header to separate it from the rest of the content.
  2. Why we use only margin-top: margins overlap each other. Setting  margin: 1.5rem auto; between two modules gives you the same space as setting margin: 1.5rem auto 0. You really only need one or the other, and since margin-top solves the extra bottom spacing issue, it’s often simpler to use it instead.

A Snippet for Your Trouble

We use this basic snippet in our content styles, which are applied in the main content area of a page (the part you’re reading right now). It covers headers and normal content tags, and is not meant to be an exhaustive list.