无法覆盖h1文本的默认边距？

Question

尽管做了：

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

#txt和#outer标题顶部之间仍有差距 - 为什么？

它看起来像是因为<h1>文字有一个我无法覆盖的默认边距？

JS FIDDLE

Answer 1

因为你有90％的高度，这使得对象不像父母那么高，因此无法到达底部。

将高度更改为100％将解决问题。

编辑： 如果您想将空格从div的底部移到顶部，则必须将top: 0%更改为top: 10%。

Answer 2

您只需将其添加到CSS

即可

#txt h1 {
  margin-top: 0;
}

Answer 3

你为#txt设定了一个固定的高度，从我的理解，这是你正在寻找的？ 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

在你的小提琴中，你将margin:0%;应用于#txt div，因此没有规则适用于<h1>。您只需添加#txt h1 { margin: 0;，请参阅下文。

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;
}