html - 2 个 div 元素之间的空间来源未知

Question

在我的 php 页面中，2 个 div 元素(div 标题和 div 内容)之间有相当大的空间，我无法弄清楚它来自哪里或为什么在那里。

HTML:

...
<div id="header">
HEADER
</div>
<div id="content">
  <h3>Login</h3>
  <form action="login.php" method="post">
...

CSS:

html {
height: 100%;
}

body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
border-style: none;
background: black;
}

#header {
margin: 0px;
padding: 0px;
height: 15%;
width: 100%;
border-style: none;
background: #02F72F;
text-align: center;
}

#content {
margin-top: 0px;
padding: 0px;
height: 70%;
width: 100%;
border-style: none;
background: white;
text-align: center;
}
...

实现后，有一个长黑条在视觉上将两个 div 分开。我知道它是黑色的，因为我特意将背景更改为黑色，但是当边距和填充设置为0时，我不知道为什么会有一个空格。 div 元素是否有默认间距？如何覆盖它？

Answer 1

您已为标题指定了 height: 15%;，为正文指定了 height: 100%;。所以你的标题将占据正文高度的15%。因此您会看到对应 15% 高度的空格。