2

I have created a HTML5 <header> element which I want to stick to the top of the page. Following that header, a <section> element is supposed to display content.

For the section element to be aligned to the bottom of the header I have assigned it a margin-top: 4em CSS rule, which results in a strange effect: The header element is now displayed with a top margin of 4em, too:

https://jsfiddle.net/n5vzgLme/1/

I have tested this with several browsers. They all display the same effect.

When I add any arbitrary text to the body (e.g. "xx" in front of the <header> element) everything works fine. But when I then delete the text again, the odd behaviour re-occurs.

Why does this happen? AFAIK, the header element should not be influenced by styles of a succeeding element.

AxD
  • 2,714
  • 3
  • 31
  • 53
  • 3
    Its not the margin that's creating this effect. Its because of position:fixed. If you add a top property as {top:0}, the issue would go away. – ShivangiBilora Dec 09 '15 at 11:49
  • I see. But I can't find any definition for this odd behaviour in the spec. Why is it influenced by the succeeding sibling? – AxD Dec 09 '15 at 11:52
  • Why? - http://stackoverflow.com/questions/2680478/margin-top-push-outer-div-down – Paulie_D Dec 09 '15 at 11:59
  • position:fixed; cause this problem. Add top:0; to fix the issue – Sam1604 Dec 09 '15 at 12:10
  • Ah, I see. The collapsing margin issue seems to cause a number of other unexpected results, too. So will a body height of 100% only work if there's a border defined, for instance. @Paulie_D: Would you like to create an answer so I can award my vote to it? – AxD Dec 09 '15 at 12:28
  • No need...You should be setting `top:0` to the header anyway as it is position fixed. I will close this question as a duplicate of the linked one.... – Paulie_D Dec 09 '15 at 12:34

0 Answers0