Question

我正在尝试创建一个包含标题，子标题，leftnav，rightnav，main和footer的页面。但是当我创建标题和子标题时，会有额外的空间来分隔它们。我怎么摆脱它？

`/*the main parts of the script*/
body{
    background-color: #0080C0;
    font-family: Arial, Helvetica, Sans-serif;
    margin: 0px;
    padding: 0px;
    font-size: 15px;
}

#wrapper{
    width: 1000px;
    margin: 20px auto;
    background-color: white;
}

#header{
    background-color: aqua;
    padding-top: 2px;
    font-size: 15px;
    padding: 5px;    
}

#subheader{
    margin: 0px;
    background-color: fuchsia;
    height: auto;
}

#leftnav{
    float:left;
    width:200px;
    height:auto;
    background-color: green;
}

#rightnav{
    float:left;
    width: 200px;
    height: auto;
    background-color: red;
}

#main{
    float:left;
    width: 600px;
    height: auto;
    background-color: yellow;
    min-height: 500px;
}

#footer{
    clear:both;
    padding:15px;
    font-size: 12px;
    background-color: gray;
    text-align: center;
}`                                                                                                

//the HTML. very simple.                       
 <body>
<div id="wrapper">
    <div id="header">
    <?php $this->load->view("header"); ?>
    </div>

    <div id="subheader">
    <?php $this->load->view("subheader"); ?>
    </div>

    <span id="leftnav">
    <?php $this->load->view("leftnav"); ?>    
    </span>

    <span id="main">
    <?php $this->load->view($main); ?>    
    </span>

    <span id="rightnav">
    <?php $this->load->view("rightnav"); ?>
    </span>

    <div id="footer">
    <?php $this->load->view("footer"); ?>
    </div>

</div>
</body>  http://www.freeimagehosting.net/uploads/54aaee204f.jpg

Answer 1

我运行了你的代码，看起来没有额外的空间。以下是一些尝试：

确保您使用的是正确的DOCTYPE
确保您使用的PHP没有输出额外的空格
使用现代浏览器（IE7 +，FF3.6，Chrome 5等）

唯一可以帮助我们更好地诊断这一点的是发布PHP的物理输出（查看源代码，复制和粘贴）。

希望这有帮助！

Answer 2

#header{
    background-color: aqua;
    padding-top: 2px;
    font-size: 15px;
    padding: 5px;    
}

你的#header上有底部填充，所以在你的#header和#subheader之间看起来像5px。虽然它应该有浅绿色背景颜色，因为它严格地是#header的一部分。

Answer 3

当我使用此HTML代码时，有空格

  <body>
  <div id="header">
    header
  </div>
  <div id="subheader">
    sub
  </div>
<div id="wrapper">
  <div id="main">
    lorem ipsum dolor sit amet
  </div>
  <div id="rightnav">
    <ul>
      <li>ene</li>
      <li>due</li>
      <li>rabe</li>
    </ul>
  </div>
  <div id="leftnav">
    <ul>
      <li>ene</li>
      <li>due</li>
      <li>rabe</li>
    </ul>
  </div>
  <div id="footer">
    <ul>
      <li>ene</li>
      <li>due</li>
      <li>rabe</li>
    </ul>
  </div>
</div>

但是当我把标题放在包装中时，没有空格

<div id="wrapper">
  <div id="header">
    header
  </div>
  <div id="subheader">
    sub
  </div>
  <div id="main">
    lorem ipsum dolor sit amet
  </div>
  <div id="rightnav">
    <ul>
      <li>ene</li>
      <li>due</li>
      <li>rabe</li>
    </ul>
  </div>
  <div id="leftnav">
    <ul>
      <li>ene</li>
      <li>due</li>
      <li>rabe</li>
    </ul>
  </div>
  <div id="footer">
    <ul>
      <li>ene</li>
      <li>due</li>
      <li>rabe</li>
    </ul>
  </div>
</div>

也许这会有所帮助

Answer 4

如果你的子标题中有一个块元素（h1，h2 ...... ul等），你应该重置它们的默认边距以避免这个“空白区域”。例如：

<style>
    #subheader ul { margin:0px; padding:0px;}
</style>

为什么我的css页面布局中有额外的空格？（CSS /初学者）

4 个答案:

为什么我的css页面布局中有额外的空格？ （CSS /初学者）

4 个答案:

为什么我的css页面布局中有额外的空格？（CSS /初学者）