Margin-top pushing overlay down

[fooman]

Hi!
I think this may be a fairly common/newbish question but I’ve never found a decent answer I can understand without reading 10 pages of posts.

I have a single container that has a margin-top of 10px. Easy enough.
I have an overlay container that will act as a modal overlay that covers the entire screen. It’s fixed 100% of the screen.

Why does the margin on the first element push everything down?
[The Pen!](http://codepen.io/anon/pen/yweaF “The Pen!”)

[Paulie_D]

You seem to have identified the problem. Can you not just remove the margin-top?

In most cases, what is really required is padding…not margin.

[Paulie_D]

The element by itself is irrelevant. Put padding on the content of the element and you’ll get what you want….probably.

[wolfcry911]

The margin on .first-element is actually sticking out of the parent (body in this case). This is normal and correct behavior. Normally you can stop it from doing so with a top margin or top padding on the parent, or overflow: hidden; on the parent – giving it a new formatting context which gives the element’s top margin something to ‘push’ against. In this case the overflow method won’t work – unless you also give html overflow: hidden; (body and html can sometimes behave differently than a block level parent element). A simple fix is to give .overlay top: 0;

[wolfcry911]

Just a note: In the third sentence, I meant to state top border or top padding on the parent element, not top margin…

[Author]

Posts