0

我已经从 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; }

我已经尝试了一切，但没有帮助。我能做些什么？

这是我目前的结果。

恼人的间距截图

4

3 回答 3

5

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

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

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

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

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

于 2013-11-01T11:36:34.473 回答
0

浏览器具有默认应用于网页的 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更好的选择是在您的or标记（在 html5 中提供）中使用无序列表，nav这将在未来得到证明并为您提供更大的灵活性。

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 提示：看看你是如何写出四次边距的？可以用top、right、bottom、left对应的数字在线写：margin: 0 0 0 0;。clear 与浮动元素有关，因此您也可以删除它。

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

希望这一切对您有所帮助：快乐编码！

于 2013-11-01T15:39:03.553 回答
0

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

 #upbox h1{ margin: 0; }

显然，你所经历的那些休息#mainbox也会产生空白。

于 2013-11-01T11:36:45.490 回答