Question

好的，我们可以清楚地看到顶部和<div>之间有一个空格。现在，我知道这是由<p>元素的边距/填充引起的，但为什么它出现在<div>之外而不在其中？

body{
  margin: 0px;
  padding: 0px;
  background-color: #808080;
}

#top-wrapper{
  background-color: #ffffff;
  margin: 0px;
  padding: 0px;
}

<body>
  <div id="top-wrapper">
    <p>hello</p>
  </div>
</body>

Answer 1

这是由于margin collapsing。

块的顶部和底部边距有时会合并（折叠）单个保证金，其大小是合并的最大边际进入它，一种称为边缘崩溃的行为。

要（阻止此操作）提供您预期的行为，将overflow: auto;添加到div，或者overflow:hidden;这会强制执行block formatting context

Demo Fiddle

块格式化上下文是a的可视CSS呈现的一部分网页。它是块框布局的区域并且漂浮物彼此相互作用。

＆＃13;

body {
    margin: 0px;
    padding: 0px;
    background-color: #808080;
}
#top-wrapper {
    background-color: #ffffff;
    margin: 0px;
    padding: 0px;
    overflow: auto;
}

＆＃13;

<body>
    <div id="top-wrapper">
        <p>hello</p>
    </div>
</body>

＆＃13;

Answer 2

这是预期的行为。这是因为段落的上边距与其父div的上边距折叠（同样对于下边距）。这会导致div 出现，就好像它有一个边距。

Margin collapsing is described here：

在CSS中，两个或多个框的相邻边距（可能或可能不是兄弟姐妹）可以组合形成单一的边缘。边距结合这种方式据说会崩溃，并由此产生组合保证金称为折现保证金。

为什么<p>将空格放在</p> <div>？</div>之外

2 个答案:

Demo Fiddle