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/
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
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/
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