Margin-Top push outer div down

Question

I have a header div as the first element in my wrapper div, but when I add a top margin to a h1 inside the header div it pushes the entire header div down. I realize this ha

Answer 1

I know this is an old issue, I've come across it many times. The problem is that all of the fixes here are hacks that would potentially have unintended consequences.

First off, there's an easy explanation for the root problem. Due to the way that margin collapsing works, if the first element inside a container has a top margin, that top margin is effectively applied to the parent container itself. You can test this on your own by doing the following:

    
Test

In a debugger, open this up and hover the div. You'll notice that the div itself actually is placed where the top-margin of the H1 element stops. This behavior is intended by the browser.

So there's an easy fix to this without having to resort to strange hacks, as most of the posts here do (no insults intended, its just the truth) - simply go back to the original explanation - ...if the first element inside a container has a top margin... - Following that, you'd therefore need the first element in a container to NOT have a top margin. Okay, but how do you do that without adding elements that don't interfere semantically with your document?

Easy! Pseudo-elements! You could do this via a class or a pre-defined mixin. Add a :before pseudo-element:

CSS via a class:

.top-margin-fix:before {   
    content: ' ';
    display: block;
    width: 100%;
    height: .0000001em;
}

With this, following the above markup example you would modify your div as such:

    
Test

Why does this work?

The first element in a container, if it has no top-margin, sets the position of the start of the next element's top margin. By adding a :before pseudo-element, the browser actually adds a non-semantic (in other words, good for SEO) element into the parent container before your first element.

Q. Why the height: .0000001em?

A. A height is required for the browser to push the margin element down. This height is effectively zero, but it will still allow you to add padding to the parent container itself. Since it's effectively zero, it won't have an effect on the layout of the container, either. Beautiful.

Now you can add a class (or better, in SASS/LESS, a mixin!) to fix this problem instead of adding weird display styles that will cause unexpected consequences when you want to do other things with your elements, purposefully eliminating margins on elements and/or replacing it with padding, or strange position/float styles that really aren't intended to resolve this issue.