The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Margin-top pushing overlay down

  • # January 17, 2013 at 11:23 am

    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!]( “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

    This reply has been reported for inappropriate content.

    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

    This reply has been reported for inappropriate content.

    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:


    # 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

    This reply has been reported for inappropriate content.

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

    # 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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed