Question

我在Menu+Content和footer之间有一个意想不到的空间，我不知道它来自哪里，因为我想摆脱它。以下是代码及其在Chrome和Firefox中的显示方式：

（抱歉格式不好，我不知道怎么做）

索引

<!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>

CSS

    div {
       /*colturi rotunde*/
        border-radius: 10px; 
    }
    body{ 
       /*gradient care se repeta orizontal numai*/
       background-image:url('a.jpg');
       background-repeat:repeat-x;  
    }
    #container {
       /*bg transparent*/
       background-color:rgba(255,255,255,0.3);
       max-width:960px;
       /*centrat in pagina*/         
       margin: 0 auto;
       /*distanta dintre border si continut*/
       padding-top:15px;
       padding-right:15px;
       padding-left:15px;
       padding-bottom:15px;     
   }
   #header { 
       background-color:#FFA500;
       position: relative;
       top: -20px;
   }
   #menu{
       background-color:#FFD700;
       width:60px;
       float:left;
       position: relative;
       top: -35px;
       margin-right:5px;
   }
   #content{
       background-color:#EEEEEE;
       min-height:200px;
       width:895px;
       float:left;
       position: relative;
       top: -35px;
  }                  
  #footer {  
       background-color:#FFA500;
       clear:both;
       text-align:center;                    
  }

图像

enter image description here

空间位于页脚的正上方。页脚实际上应该非常接近content div。

Answer 1

删除＆＃34; top：xxpx＆＃34;＆s，为元素添加边距以隔离它们，并从标题h1中删除margin-top和margin-bottom

   #header > h1 {
     margin-top : 0px;
     margin-bottom: 0px;
   }

小提琴（没有间距）

http://jsfiddle.net/vPg6k/1/

Answer 2

您已使用#header向上移动了部分元素（#content，#menu，top），但您还没有移动{{\ n} 1}}以同样的方式。这些元素都有#footer，导致它们在视觉上移动，但不会改变它们在文档流程中的位置。

但是，在向页脚添加顶部之前，您可能需要先了解为什么您首先使用position: relative。如果从所有类中删除top，则内容/菜单和标题之间会出现间隙。此差距是由标头中h1元素的默认边距引起的。如果您应用以下样式（并在任何地方删除top），则所有间隙都将消失。

top

大多数浏览器都有＆＃34; Web Inspector＆＃34; 难以置信 的功能对于处理网页非常有用。（特别是样式。）如果您不熟悉浏览器的检查员，我强烈建议您阅读。我不知道您使用的是哪种浏览器，因此我无法将您发送到任何地方，但快速的Google应该可以为您提供更多详细信息。

Answer 3

将这些样式用于#footer：

#footer
{
    background-color:#FFA500;
    position: relative;
    clear:both;
    text-align:center;
    top:-30px;
}

这会将页脚向上移动30个像素

Answer 4

您可能希望为页脚添加高度。现在它正在引用字体的高度。

出乎意料的空间

4 个答案: