Forums

Give help. Get help.

  • # 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: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: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: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 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag