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.
The Philosophy of Margin-Top
If you want an extended edition for my recommendations, keep reading.
- 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.
- Why we use only margin-top: margins overlap each other. Setting
margin: 1.5rem auto;between two modules gives you the same space as settingmargin: 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.
