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%高度的空间。

Answer 2

您可以为这两个元素输入float:left，空间将消失（在它们之间 - 剩下的15％当然仍然存在）：
http://jsfiddle.net/AbdiasSoftware/ENGx9/

#header {
    float:left;
    ....
}

#content {
    float:left;
    ...
}

可选地，h3标签的边距将div向下推 - 您可以修改标签，而不是使用填充来为标题提供一些空间：

h3 {
    margin:0;
    padding:10px 0;
}

例：
http://jsfiddle.net/AbdiasSoftware/ENGx9/1/

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

2 个答案: