在我的div中添加文本会使我的div降低

Question

您可以在下面的图片中看到我的div在页面顶部有一个空格;我不想要任何空间。当我添加文本时，div会自动向下移动。我希望我的文本在div的中心对齐，而我的div在顶部没有任何空格。

我试图在我的div id上做vertical-align: top;，没有什么会移动一切都保持不变。我试图添加position: absolute，但这也不会奏效。我错过了别的什么吗？

这是我的代码：

＆＃13;

＆＃13;

#topbar {
  background: url(img/topbarbg.jpg);
  height: 40px;
  vertical-align: top;
}
.email {
  font-family: 'Futura', sans-serif;
  font-size: 10px;
  text-align: right;
}

＆＃13;

<header>
  <div id="topbar">
    <p class="email">info@erdosmiller.com</p>
  </div>

</header>


<div id="hero">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

重置padding＆amp; margin就像这样＆amp;设置line-height以垂直对齐文字：

* {
  padding: 0;
  margin: 0;
}
#topbar {
  background: url(http://placehold.it/100x100);
  height: 40px;
  /* vertical-align: top; */
}
.email {
  font-family: 'Futura', sans-serif;
  font-size: 10px;
  text-align: right;
  line-height: 40px;
}

<header>
  <div id="topbar">
    <p class="email">info@erdosmiller.com</p>
  </div>
</header>
<div id="hero">
</div>