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!
If you want that first element on the page to have space between it and the top of the page... what do you do without a margin on the element... or padding on the body?
Both have the same effect I'm trying to side-step.
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;
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!
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.
If you want that first element on the page to have space between it and the top of the page... what do you do without a margin on the element... or padding on the body?
Both have the same effect I'm trying to side-step.
The element by itself is irrelevant. Put padding on the content of the element and you'll get what you want....probably.
not if it has a border and you don't want that border to butt up against the edge of the page.
I'm not sure if you took a look, but I made a simple lil' pen:
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;
Yes, super easy fix. Thank you! I will keep your help in mind in the future when dealing with other situations. Thanks!
Just a note: In the third sentence, I meant to state top border or top padding on the parent element, not top margin...