HTML - divs之间的空格

问题描述：

我已经从3个div创建了我的网站，但是我的div之间有一个烦人的问题。我有一些我不想要的空间。这是我的网站的标记：HTML - divs之间的空格

<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

您是否重置了浏览器的默认样式？ – 2013-11-01 11:36:04

答

以下内容添加到您的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; }的原因，它看起来有点奇怪。如果您取出width属性，则所有divs的宽度将相同。

答

您还可以调整内部的div块级元素的边距：

#upbox h1{ margin: 0; }

显然那些你#mainbox有破裂会造成白色空间，以及。

答

浏览器默认应用于网页的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; 
}

希望这一切都有助于：快乐编码！

HTML - divs之间的空格

相关推荐