how if i have the following code :
HTML :
<section class="home"> </section> <section class="main"> <h1>Hello</h1> </section>
CSS :
html,body{ height: 100%; width: 100%; } .home{ background: #000; height: 100%; } .main{ height: 100%; background: pink; }
Why the white space or rather margin between the 2 sections ?? the problem seems to be the h1 tag . if i do :
h1{ margin: 0; }
Bham ! problem solved .
I have two issues with this .
1st the minor problem , now this style might be applied by the browser , i ca correct this with a reset no issues . but this is still a problem nevertheless .
my 2nd problem , AND THE big problem , now suppose the browser or even i explicitly specify that the margin-top of the h1 should be say 20-30px the margin should be from side the .main section WHY IS THE MARGIN APPLIED TO h1 WHICH IS INSIDE .main ACTING AS A MARGIN BETWEEN .main and .home ?
What is the cause of this unique problem ??
figured this out
margin collapsing issue ,
had to do overflow:auto || overflow:hidden on the parent container.