HTML - div之间的空间

Question

我已经建立了3个div的网站,但我的div之间有一个恼人的问题.我有一些我不想要的空间.这是我网站的标记:

  <div id="upbox">
    <h1 class="headline1">...</h1>
  </div>
      <div id="navig">

          <table align="center" cellspacing="0" width="60%" cellpadding="0" dir="ltr">
                <tr>
                    <td><a href =url> home </a></td>
                    <td><a href =url> Reviews </a></td>
                    <td><a href =url> Upcoming </a></td>
                    <td><a href =url> Xbox 360 </a></td>
                    <td><a href =url> Xbox One </a></td>
                    <td><a href =url> PS3 </a></td>
                    <td><a href =url> PS4 </a></td>
                    <td><a href =url> PC </a></td>
                    <td><a href =url> Contact Us </a></td>
                </tr>
            </table>

      </div>
    <hr />

   <div id="mainbox">
    <br/>
    <br/>
    <p class="imgfirst"><img src="Images\characters.jpg" width="70%"></p>

   </div>

我的css是:

#mainbox {
  width: 1000px;
  margin:0 auto;
  background-color: white;
  border: 2px solid;
  border-color: #970c0c;
}

#upbox {
  background-color: #1e1e1e;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  clear:none;
}

#navig { background-color: #970c0c; }

我尝试了一切,但它没有帮助.我能做什么？

这是我目前的结果.

Answer 1

以下添加到您的CSS,因为有与你相关的利润h1,hr和body元素:

h1 { margin:0; }
hr { margin:0; }
body { margin:0; }

演示:http://jsfiddle.net/4gq3b/3/

您可以考虑使用重置CSS样式表.基本上,这是一种通过在应用CSS之前击败任何基于浏览器的规则和遗漏来尽可能保持结果的方法.

另外,我认为你有理由设置#mainbox { width:1000px; },它看起来有点奇怪.divs如果取出width属性,所有宽度都相同.