Html “填充顶部”；“更大”；而不是填充底部

我不明白为什么在这个设置中，填充顶部比填充底部大很多倍。试图改变周围的东西来找到罪犯的财产，但到目前为止什么都没有。我确实注意到，我无意中留下了一个“在跨度之后，问题就消失了，但不确定这是怎么回事。”

正文
{
字体系列：无衬线；
}
#窗口
{
背景色：黑色；
颜色：白色；
显示器：flex；
弯曲方向：立柱；
不透明度：1；
左：50%；
底部：0px；
位置：固定；
宽度：自动；
高度：自动；
最小宽度：600px；
最小高度：自动；
最大宽度：80vw；
最大高度：80vh；
转化：translateX（-50%）；
大纲：0px；
游标：默认值；
z指数：5000002；
缩放：1；
}
#容器
{
溢出y：自动；
溢出x：隐藏；
边界：无；
大纲：0；
保证金：0；
柔性生长：1；
}
#内容
{
字体大小：22px；
文本对齐：居中；
溢出包装：断开单词；
垫面：1.6em；
垫底：1.6em；
左侧填充：1.6em；
右侧填充：1.6em；
}
·小吃味精
{
右边填充：200px；
浮动：左；
}
.零食
{
颜色：#5fce49；
文本转换：大写；
字母间距：3px；
光标：指针；
浮动：对；
}

新消息来了
打开

问题在于浮动的元素而不是填充。如下所示，所有大小的填充都相同：

如果你仔细检查，你也会看到你的高度等于0，因为你有一个浮动元素，并且由于父元素不是浮动的，它将折叠（这意味着没有高度）。要解决这个问题，你需要将

oveflow:auto

添加到

#content

正文{
字体系列：无衬线；
}
#窗口{
背景色：黑色；
颜色：白色；
显示器：flex；
弯曲方向：立柱；
不透明度：1；
左：50%；
底部：0px；
位置：固定；
宽度：自动；
高度：自动；
最小宽度：600px；
最小高度：自动；
最大宽度：80vw；
最大高度：80vh；
转化：translateX（-50%）；
大纲：0px；
游标：默认值；
z指数：5000002；
缩放：1；
}
#容器{
溢出y：自动；
溢出x：隐藏；
边界：无；
大纲：0；
保证金：0；
柔性生长：1；
}
#内容{
字体大小：22px；
文本对齐：居中；
溢出包装：断开单词；
垫面：1.6em；
垫底：1.6em；
左侧填充：1.6em；
右侧填充：1.6em；
溢出：自动；
}
·小吃味精{
右边填充：200px；
浮动：左；
}
.零食{
颜色：#5fce49；
文本转换：大写；
字母间距：3px；
光标：指针；
浮动：对；
}

新消息来了
打开

你的目标只是将其居中吗？你有大量相互冲突的css，这使得你很难解释你的最终目标是什么。还有其他问题……它是否应该放在页面的其余部分上？它是否应该将页面的其余部分左右移动？抱歉，我遗漏了一些信息。重点是将其居中。是的。我刚刚意识到我有一些错误的属性，底部：应该是0px而不是200px（我运行了一些测试），应该是底部，我修正了