Html 内部div不考虑相对于父div的页边距顶部

检查这个极其简单的html结构。一个div在另一个div中，内部（绿色）div有

页边距顶部：100px

，外部（红色）div没有页边距顶部。外部div是内部div（100px）的两倍（200px）

那么你希望结果会是什么样子呢？如果你像我一样，你会得到与你自然期望得到的相反的结果

我的问题不是如何防止这种情况。我的问题是，为什么在所有浏览器中都是这样？我的意思是，这显然是它的工作方式，但对我来说，这是强烈违反直觉的

.red{
背景色：#a00；
高度：200px；
}
格林先生{
背景色：#0a0；
边缘顶部：100px；
高度：100px；
}

这是一种正常的渲染方式，称为边距折叠。您可以阅读更多内容，我认为这是一个父/子依赖性问题。两个div的位置都是默认值：“static”。因此，红色Div位于绿色Div的后面，绿色Div的边距在顶部

你想要实现什么？你期望发生什么？因为这对我来说似乎是合理的。我想要实现的是理解为什么以浏览器的方式呈现它是有意义的？@你觉得子元素的边距顶部不适用于父元素是合理的，“但是向父母吐露心声？”康奈索我认为这很好地解释了这一点。埃里克·迈耶本人也写过一篇关于这一点的文章，他甚至承认这种行为可能有点出乎意料。“在大多数情况下，页边距折叠提供了我们想要的布局结果类型。只有在我们想要“包含”页边距的情况下，才会这样做。”“由于其他因素，事情可能会有点不对劲。不过，由于CSS的编写方式，有一些方法可以克服不必要的崩溃。通过将填充或边框与元素关联，它将“包含”子元素的边距