Question

我过去几天一直在创建一个页面，并且在我使用的部分之间存在这种奇怪的差距。我将它们包含在一个名为包装器的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顶部之间的差距

由于

Answer 1

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

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

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

Answer 2

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

section h1 {
  margin: 0;
}

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

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

参考：Element identifiers: the id and class attributes

Answer 3

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

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

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

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

3 个答案: