div里面的p标签和边缘崩溃，无法理解

Question

HTML：

<div>  
    <p>
        Lorem ipsum dolor sit amet.
    </p>  
</div>  

CSS：

p {
    margin-top: 20px;
}  

div {
    width: 400px;
    height: 80px;
}

保证金是指 FROM ITS PARENT 框周围的空间。对？ 为什么我的p标签没有得到div的上边距？而不是身体。我的意思是p和div结合在一起。
我知道浮动我们可以解决这个问题。或应用边框或填充 我的问题是：有没有崩溃？发生了什么事？

修改 对不起伙计们。
正如我所说，我知道解决方案。我想知道潜在的概念。

保证金适用于元素的OUTSIDE。

但考虑一下p标签。它是INSIDE。我们给p标签的边际应该只适用于它的兄弟姐妹。不是外部元素，如父元素或div。

Answer 1

这称为Margin Collapsing。

一种解决方案是在padding元素中添加parent：

p {
    margin-top: 20px;
    background: yellow;
}  

div {
    width: 400px;
    height: 80px;
    background: red;
    padding-top: 1px;
}

---

另一个解决方案是将overflow添加到您的父元素：

div {
    width: 400px;
    height: 80px;
    background: red;
    overflow: hidden;
}

请参阅此jsFiddle Demo。

Answer 2

你应该使用填充：

p { padding-top: 20px; }
div { width: 400px; height: 80px; background-color:blue}

http://jsfiddle.net/t1acatL1/1/

Answer 3

这种情况正在发生，因为您没有为 div 元素设置任何位置。

将位置：绝对设置为div元素。

div{
   position: absolute;
   width: 400px;
   height: 80px;
}

就是这样。现在检查一下。