div元素之间的随机间隙答案

【问题标题】：Random gap between div elementsdiv元素之间的随机间隙
【发布时间】：2014-02-19 16:49:44
【问题描述】：

我在 div 元素之间出现了一个随机间隙，我似乎无法让它消失。问题显示http://i.imgur.com/46lEDr2.png

这是我的相关代码

 <div id="menuBar"><!--Hosts menu options-->
 </div>
 <!-- end #menuBar -->
 <div id="content">
 <p>hello</p>
 </div>

和 CSS

#menuBar{
    width:900px;
    height:80px;
    margin: 0 auto;
    background:url(images/g2w2g.png) repeat-y;
}
#content{
    width:900px;
    margin: 0 auto;
    padding-top:0;
    background:url(images/g2w2g.png) repeat-y;
}

谢谢大家

【问题讨论】：

<p> 标签周围有多少边距和内边距？
是p标签的原因，把p上的margin重置为0

标签： css html whitespace

【解决方案1】：

当您在 HTML 中使用 p 元素开始新段落时，它会自动在内容上方和下方创建一些空间。

添加

p {
    margin:0px;
    padding:0px;
}

EXAMPLE

【讨论】：

唯一没有尝试将边距和内边距设置为 0.. 谢谢！
@Fonti 没问题 :) 很容易错过简单的事情

【解决方案2】：

如果添加底部：16px;进入#content div，这将用一个位置来修复差距：相对；

【讨论】：

这行得通，但您需要对每个具有 <p> 的 div 应用相同的规则，因为从 <p> 中删除填充可以整体解决问题

【解决方案3】：

您可以将display: inline-block; 添加到您的#content div 来解决此问题。

这是给你的Fiddle example

【讨论】：

【解决方案4】：

检查段落的边距或向内容 div 添加一些填充。那可能会解决它。

【讨论】：

【解决方案5】：

这是因为您的 p 标签仍然具有浏览器放置在其上的默认边距和填充。你应该这样做

p {
    padding:0px;
    margin:0px;
}

您还应该考虑使用 CSS 重置。每个浏览器都有自己的默认“用户代理”样式。通过包含一个重置，它将所有这些默认样式设置为 null，这应该避免不同浏览器之间的任何不一致。要记住的一件重要事情是在任何其他样式之前包含您的 css 重置样式。例如

<link rel="stylesheet" type="text/css" href="reset.css" /><!-- CSS reset in here -->
<link rel="stylesheet" type="text/css" href="style.css" /><!-- Your styles in here -->

我建议你看看这两个链接 CSS Reset Normalize.css

【讨论】：

你能解释一下关于 CSS 重置的更多信息吗？以前从未听说过这个词