Html 意外空间
我在菜单+内容和页脚之间得到了一个意想不到的空间，我不知道它从哪里来，因为我想去掉它。以下是我在Chrome和Firefox中的代码和外观： 对不起，格式不好，我不知道怎么做 索引Html 意外空间,html,css,Html,Css,我在菜单+内容和页脚之间得到了一个意想不到的空间，我不知道它从哪里来，因为我想去掉它。以下是我在Chrome和Firefox中的代码和外观： 对不起，格式不好，我不知道怎么做 索引 <!DOCTYPE html> <html> <head> <title>Online Contacts</title> <link rel="stylesheet" type="text/css" href=
<!DOCTYPE html>
<html>
<head>
<title>Online Contacts</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>OnCo</h1>
</div>
<div id="menu">
<b>Menu</b><br>
ab<br>
cd<br>
ef
</div>
<div id="content">
Content goes here
</div>
<div id="footer">
Copyright Š joj
</div>
</div>
</body>
</html>
空格就在页脚的正上方。页脚实际上应该非常接近内容分区。您可能需要为页脚添加高度。现在，它是参照字体的高度 删除顶部：xxpx，将边距添加到元素以隔开它们，并从标题h1中删除边距顶部和边距底部
#header > h1 {
margin-top : 0px;
margin-bottom: 0px;
}
这将使页脚向上移动30个像素您已经使用top向上移动了一些元素页眉、内容、菜单，但是您没有以相同的方式向上移动页脚。这些元素都有position:relative，这会使它们在视觉上移动，但不会改变它们在文档流中的位置 但是，在将top添加到页脚之前，您可能需要再次了解一下为什么要首先使用top。如果从所有类中删除top，则内容/菜单和标题之间会出现间隙。此间隙是由页眉中h1元素的默认边距造成的。如果应用以下样式并删除所有顶部，则所有间隙都应消失
#header h1 {
margin: 0px;
}
大多数浏览器都有一个Web Inspector功能，对于处理网页非常有用。特别是风格。如果您不熟悉浏览器的检查器，我强烈建议您仔细阅读。我不知道您使用的是什么浏览器，所以我无法向您发送任何特定的信息，但快速的谷歌搜索应该会为您提供更多详细信息。我猜空间的高度约为35px，这正是top的移动，您可以设置top:-35px的内容，请注意，相对位置在向左和向上移动之前仍将保持图元的原始空间。一个快速解决方法是设置内容的最低利润率：-35px，但是你应该找到更好的解决方案。为什么这不是一个好的解决方案？因为它不是真正动态的，更难维护，这取决于案例和你的要求。我明白你的意思。但是如果我从页眉、菜单、内容中删除所有的顶部值，不需要的空间将位于div的顶部。我似乎无法摆脱它。我不认为这会给我带来问题。他想移动页脚，而不是调整页脚的大小。你能解释为什么页眉的边距会给我带来问题吗？它是否有一个预设值>0，或者为什么它占用了这个空间？边距从容器中推出并进入内容。默认情况下，元素有边距，因为它们有一个字体大小。它将有边距，但空格将在页脚下。我以前已经试过了。还有，我得到了答案。只需要它的解释。是的，但它也解决了问题：PI确实使用了检查器，但无法看到或知道标题有边距。@geogeirimiciuc好的。我只是想确定一下。如果你不去寻找的话，这是很难找到的工具之一。我花了一分钟才弄清楚间距是从哪里来的，但在去掉所有间距后，我知道它一定是从头球周围的某个地方来的。在那里挖掘，发现了h1的边缘。
#footer
{
background-color:#FFA500;
position: relative;
clear:both;
text-align:center;
top:-30px;
}
#header h1 {
margin: 0px;
}