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

Question

尽管这样做：

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

在#txt和#outer的标题顶部之间仍然存在间隙-为什么？

看起来是因为<h1>文本具有无法覆盖的默认边距？

JS菲德尔

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