为什么各部分之间存在较大差距?

时间:2015-02-20 20:41:22

标签: html css

我过去几天一直在创建一个页面,并且在我使用的部分之间存在这种奇怪的差距。我将它们包含在一个名为包装器的div中,但即使在div中,div的顶部和该部分的开头之间也存在一条线的高度差。在页面下方,各部分之间也存在较大差距。

我似乎无法在不弄乱top-margin的情况下找到一种方法来改变这种情况,但即便如此,这也是一个非常糟糕的问题。这样做的方式。

这里的代码显示我真的没有做任何事情(据我所知)的属性。

section{
    height:10px;
    min-height: 400px;
    background: rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid rgba(0, 0, 0, 0.5);
}

#wrapper{
    padding: 10px;
}

这是JSFiddle,如果这有助于解释我的意思:http://jsfiddle.net/L6qeyhsv/

我认为它可能是section的默认值,但这不能解释section顶部#wrapper顶部之间的差距

由于

3 个答案:

答案 0 :(得分:3)

我已经更新了你的小提琴,

您需要删除边距,将<h1>重置为0.测试方法的一个好方法是使用开发人员工具,突出显示元素并查看默认边距和填充应用于元素。

小提琴:https://jsfiddle.net/L6qeyhsv/5/

答案 1 :(得分:2)

您必须重置默认<h1>页边距。

section h1 {
  margin: 0;
}

小提琴:http://jsfiddle.net/L6qeyhsv/3/

附注,您不能拥有同名的多个id,它们必须是唯一的。

参考:Element identifiers: the id and class attributes

答案 2 :(得分:1)

如果您想避免从h1中移除边距(实际上您可以并且应该删除并使用padding替换),您可以使用常见的clearfix hack来解决此问题:

section:before,
section:after {
    content: " ";
    display: table;
}

这主要通过添加不受margin collapse影响的“first”和“last”元素来实现。 可以找到更长的解释here