段落元素导致div被压低

Question

我的div的宽度等于浏览器的宽度。每当我在div中放置文本时，它就会被推下并留下空隙。如果我删除了文本，则将div放回原位。

如何消除这种差距？

示例

＆＃13;

＆＃13;

body {
  margin: 0;
  background: #51c3cd;
}
#top {
  width: 100%;
  height: 40px;
  background: #505050;
}
#header {
  width: 100%;
  height: 150px;
  background: #b5e3e2
}
#header h3 {
  /* logo*/
  font-family: Darleston;
  color: white;
  font-size: 40pt;
  text-align: center;
}

＆＃13;

<div id="top"></div>
<header id="header">
  <h3>The Merry Knitters</h3> 
</header>

＆＃13;

＆＃13;

＆＃13;

Answer 1

因为<p>标记包含添加边距的浏览器样式。尝试重置如下：

p {
    margin: 0;
    padding: 0;
}

Answer 2

由于我在示例代码中找不到任何p-element，我认为您的意思是h3-element。我设法通过在CSS中添加以下代码来消除您提到的差距：

#header h3 {
    margin: 0px;
    ...
}

示例：

body {
  margin: 0;
  background: #51c3cd;
}
#top {
  width: 100%;
  height: 40px;
  background: #505050;
}
#header {
  width: 100%;
  height: 150px;
  background: #b5e3e2
}
#header h3 {
  /* logo*/
  margin: 0px;
  font-family: Darleston;
  color: white;
  font-size: 40pt;
  text-align: center;
}

<div id="top"></div>
<header id="header">
  <h3>The Merry Knitters</h3> 
</header>