2

在我的 php 页面中，两个 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 元素是否有默认间距，我该如何覆盖它？

4

2 回答 2

3

你已经height: 15%;为你的头和height: 100%;你的身体付出了。所以你的标题将占据15%身体的高度。因此，您会在那里看到相应15%高度的空间。

于 2013-06-09T05:16:40.977 回答
2

您可以float:left为这两个元素输入 a 并且空间会消失（在它们之间 - 剩余的 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/

于 2013-06-09T05:19:42.573 回答