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; }

我已经尝试了一切，但它没有帮助。我该怎么办？

这是我目前的结果。

screenshot of the annoying spacing

Answer 1

将以下内容添加到您的CSS中，因为有与您的h1，hr和body元素关联的边距：

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

DEMO ：http://jsfiddle.net/4gq3b/3/

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

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

Answer 2

您还必须调整div中块级元素的边距：

 #upbox h1{ margin: 0; }

显然，#mainbox中的那些休息也会产生空白。

Answer 3

浏览器具有默认应用于网页的CSS规则，但每个浏览器供应商决定实施这些规则的方式略有不同。所以您遇到的是浏览器的默认规则。

要从浏览器覆盖这些默认规则并修复问题，可以将此行放在CSS文件的顶部。这会将这三个元素的边距设置为0。

h1, hr, body { margin: 0 }

另一种选择是在CSS文件的顶部包含CSS重置或链接到一个。以下是一些可用于将CSS转换为基线的资源，您可以从那里进行构建：CSS重置：http://meyerweb.com/eric/tools/css/reset/index.html和规范化CSS：http://necolas.github.io/normalize.css/

现在让我们谈谈语义HTML：

在你的代码中，你使用一个表来保存似乎是导航栏的东西。更好的选择是在div或nav标记（在html5中提供）中使用未排序的列表，这将在未来证明并为您提供更大的灵活性。

HTML看起来像这样。

 <div id ="navig">
   <ul>
     <li>Reviews</li>
     <li>Upcoming</li> 
     <li>Xbox 360</li> 
   </ul>
 </div>

或：

  <nav ="navig">
   <ul>
     <li>Reviews</li>
     <li>Upcoming</li> 
     <li>Xbox 360</li> 
   </ul>
  </nav>

CSS看起来像这样。

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

 #navig ul {
   margin: 0;
   padding: 0;
   text-align: center;
 }

 #navig ul li {
   display: inline;
 }

CSS提示：看看你如何写出四次保证金？它可以与对应于顶部，右侧，底部，左侧的数字在线写入：margin: 0 0 0 0;。而且明确与浮动元素有关，所以你也可以放弃它。

#upbox {
  background-color: #1e1e1e;
  /*four into one*/
  margin: 0 0 0 0;
  clear:none;
}

希望这一切都有所帮助：Happy Coding !!

HTML - div之间的空间

3 个答案: