Question

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

谢谢你们

Answer 1

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

添加

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

EXAMPLE

Answer 2

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

Answer 3

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

这是Fiddle example给你的

Answer 4

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

Answer 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

div元素之间的随机差距

5 个答案: