Grow your CSS skills. Land your dream job.

Margin-top pushing overlay down

  • # January 17, 2013 at 11:23 am

    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!”)

    # January 17, 2013 at 11:39 am

    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.

    # January 17, 2013 at 11:49 am

    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.

    # January 17, 2013 at 11:50 am

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

    # January 17, 2013 at 1:14 pm

    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:

    Here

    # January 17, 2013 at 1:16 pm

    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;

    # January 17, 2013 at 1:24 pm

    Yes, super easy fix. Thank you!
    I will keep your help in mind in the future when dealing with other situations.
    Thanks!

    # January 17, 2013 at 1:49 pm

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

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".