Html 上边距拉动上元素

当内部元素放置上边距时，容器被拉下，所以白色部分出现在页面顶部。我怎样才能防止白色部分

.container{
背景：红色；
高度：500px；
}
.内部{
边缘顶部：100px；
高度：50px；
背景：黄色；
}

为什么这里有白色部分？？

将外部元件上的溢出设置为自动。你在你的例子中看到了

父级和第一/最后一个子级-如果没有边框、填充、内联 创建零件、块格式上下文，或清除以分隔 从块的第一个子块的边距顶部开始的块的边距顶部；或 无边框、填充、内联内容、高度、最小高度或最大高度 将块的页边距底部与块的页边距底部分开的步骤 最后一个孩子，这些边缘就会崩溃。崩塌的边缘结束了 在父母之外

.container{
背景：红色；
高度：500px；
溢出：自动；
}
.内部{
边缘顶部：100px；
高度：50px；
背景：黄色；
}

为什么这里有白色部分？？

您得到的结果是由于以下原因而预期的

CSS框模型本质上是一个包装每个HTML元素的框。它包括：边距、边框、填充和实际内容

盒子模型不同部分的说明：

内容-显示文本和图像的框的内容

填充-清除内容周围的区域。填充物是透明的

边框-围绕填充和内容的边框

边距-清除边界外的区域。空白是透明的

请参见此片段中所示的边距和填充之间的差异：

.container{
背景：红色；
高度：500px；
}
.内部{
高度：50px；
背景：黄色；
}
.保证金{
边缘顶部：100px；
}
.填充{
填充顶部：100px；
}

内部div有一个边距顶部

内部div有一个填充顶部

内部div没有填充/边距

移除分区内部的页边距顶部：100px

也可以使用页边距顶部：0，或顶部：0；但是没有必要

试试这个：

html,body {margin:0}

.container {
background: red;
height: 500px;
}

.inner {
/*margin-top: 100px;*/
/*margin-top: 0;*/
/*top:0;*/
height: 50px;
background: yellow;
}

// ---------------      

<div class="container">
  <div class="inner"></div>
</div>

html，正文{margin:0}
.集装箱{
背景：红色；
高度：500px；
}
.内部{
/*边缘顶部：100px*/
/*边际上限：0*/
/*排名：0*/
高度：50px；
背景：黄色；
}
// ---------------