div内的p标签和边距折叠，无法理解[重复]答案

【问题标题】：p tag inside div and margin collapse, can't understand [duplicate]div内的p标签和边距折叠，无法理解[重复]
【发布时间】：2014-10-17 13:51:25
【问题描述】：

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 标签。它在里面。我们给 p 标签的任何边距都应该只适用于它的兄弟姐妹。而不是像它的父元素或 div 这样的外部元素。

【问题讨论】：

【解决方案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。

【讨论】：

【解决方案2】：

这是因为您没有为 div 元素设置任何位置。

将 position:absolute 设置为 div 元素。

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

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

【讨论】：

【解决方案3】：

你应该使用填充：

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

【讨论】：