Grow your CSS skills. Land your dream job.

Please help: Margin or Padding

  • # February 21, 2011 at 9:18 pm

    I don’t understand the following: I have created a page container with a separate div header and also h1 in the header. I user universal selector to offset all paddings and margins.
    My intension was to make sure that h1 is not totally on the top of the header which has a set height, but a little bit below. So, I decided to insert:
    h1
    {margin-top: 10px;}

    However, instead of just shifting h1 10 pixel down in the header, my code shifted header 10px from the top of the browser.

    h1{padding-top: 10px } is what works for me. However, i do not understand why applying margin to h1 does not give me the same result. Who can tell me why? The link is below. thank you

    http://www.sevda.netii.net/week8/

    # February 21, 2011 at 11:49 pm

    that will only patch the ‘problem’…
    research collapsing margins (eric meyer has a post titled ‘uncollapsing margins’) to understand whats happening. you have a number of options, however I don’t recommend the relative positioning offset. You could put a 1px top padding or 1px top border on the header and the h1 margin will have something to ‘push’ against. Or you could eliminate the h1 margin and just use top padding on the header

    # February 22, 2011 at 12:36 am

    like wolf said…use top padding on the header and be done.

    # February 22, 2011 at 1:14 pm

    thank you very much.

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

You must be logged in to reply to this topic.

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