Can't override default margin of h1 text?

Question

Despite doing:

top: 0%;
margin-top: 0%;
padding-top: 0%;

there's still a gap between the top of the header in #txt and #outer - why?

It looks like it's because the <h1> text has a default margin that I can't override?

JS FIDDLE

Answer 1

Because you have a height of 90% which makes the object not as high as the parent and is therefore unable to reach the bottom.

Changing the height to 100% will fix the problem.

Edit: If you want to move the space from the bottom of the div to the top you have to change top: 0% to top: 10% .

Answer 2

You just need to add this to your CSS

#txt h1 {
  margin-top: 0;
}

Answer 3

You had set a fixed height for #txt, from what i understood, this is what you're looking for? https://jsfiddle.net/dryy2j31/5/

#txt {
position: absolute;
background-color: green;
top: 0%;
margin-top: 0%;
padding-top: 0%;
width: 100%;
height: auto;
}

Answer 4

In your fiddle you are applying the margin:0%; to the #txt div, so no rules are being applied to the <h1> . You just need to add #txt h1 { margin: 0; see below.

 var outer = document.createElement("div"); outer.id = "outer"; var txt = document.createElement("div"); txt.id = "txt"; txt.innerHTML = "<h1>Enter your email</h1> <p>We need your email to do stuff.</p>"; outer.appendChild(txt); document.body.appendChild(outer); 

 #outer { background-color: yellow; width: 530px; height: 300px; position: absolute; left: 0%; right: 0%; top: 9.05%; margin: 0 auto; } #txt { position: absolute; background-color: green; top: 0%; margin-top: 0%; padding-top: 0%; width: 100%; height: 100%; } #txt h1 { margin: 0; }