使边距扩展包含元素不逃避吗？

Question

当我对元素应用边距而不是扩展其包含元素时，它会在其外部创建边距。因此，使用下面的代码，div的彩色背景之间有一个空格。

为什么会这样？对于我来说，扩展包含div似乎更合乎逻辑（因此，代码示例中没有空格，彩色“条形”会更胖）。

有没有办法用CSS我可以阻止它发生？

http://codepen.io/anon/pen/KrJgm

<div class="one">
  <p>Text</p>
</div>
<div class="two">
  <p>Text</p>
</div>
<div class="three">
  <p>Text</p>
</div>
.one {
  background: red;
}
.two {
  background: green;
}
.three {
  background: gold;
}

更新对不起我不认为我很清楚。我明白段落标签上的边距是导致空白区域，但我不明白为什么边距不会“推回”包含div（所以它看起来就像填充已应用于包含div一样） 。

Answer 1

当你更新你的问题时，我觉得麻烦你的是Collapsing Margins

  

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

解决方案？在父元素上使用overflow: auto;。

Demo

---

如果您正在谈论演示中的空白区域，因为我没有看到您的代码中使用的任何边距..以下是答案..

您没有重置浏览器默认样式..

Demo

* {
   margin: 0;
   padding: 0;
   outline: 0; /* Optional */
}

此处我使用*选择器选择所有元素，并使用margin: 0;和padding: 0;重置浏览器默认值。

---

有些人不会使用*选择器，因为从性能的角度来看它们会发现它们很糟糕，所以如果是这种情况，你可以使用CSS Stylesheet Reset

---

如果您在代码中使用的是边距，请参阅此答案...

如果您知道CSS Box Model，border，则padding和margin会在元素之外而不是在内部计算。

因此，在这种情况下，您可能希望padding而不是margin。

尽管如此，您可以使用设置为border-box或padding-box的{​​{3}}属性来改变CSS Box模型的行为，这将计算border和padding在元素内部，而不是在它之外计算..

Answer 2

段落标记默认有边距。因此，如果你想要去除你需要设置为0的边距并扩展段落容器，你需要添加填充（容器内部的垫），边缘用于容器外部

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

http://codepen.io/anon/pen/Bqgyd