html - 让 margin extend containing element 不转义吗？

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

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

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

Demo

---

如果您说的是演示中的空白区域，因为我没有看到您的代码中使用了任何边距。下面就是答案。

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

Demo

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

我在这里使用 * 选择器来选择所有元素，并使用 margin: 0; 和 padding: 0; 来重置浏览器默认..

---

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

---

如果您在代码中使用边距，请引用此答案...

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

所以在这种情况下，您可能希望使用 padding 而不是 margin。

不过，您可以使用 box-sizing 改变 CSS 盒模型的行为。属性设置为 border-box 或 padding-box 将计算元素内部的 border 和 padding在它之外计数..