我找到了答案。我以为"填充上衣"有点像"让我的身材这么高"，但实际上它的意思是"给这个身材增加这么高"。
据说"百分比填充基于父元素的宽度">。Padding-top: 100%和width: 100%应该给我正方形的形状。这不完全是我的情况，我不明白为什么。
假设我有一个这样的结构：
<body>
<div class="wrapper">
<div class="page">
<div class="group">
<div class="section">
</div>
</div>
</div>
</div>
</body>
我想把"截面"做成正方形。我还想在页面上做一些边框。所以我这样做：
.wrapper {
display: flex;
width: 100%;
justify-content: center;
}
.page {
/* Making border this way */
width: 95%;
}
.group {
width: 100%;
}
.section {
/* Making square */
width: 100%;
padding-top: 100%;
}
但事实证明，我的"正方形"比它应该高一点。高出5%。在我的理解中，我告诉浏览器"取‘组’的100%w，等于‘部分’的100%w，并使‘部分’这么高"。很明显，它并没有像我预期的那样起作用。
因此，如果能帮助解释我的逻辑出了什么问题，或者更好的是，如何在不使用绝对数字的情况下保持所有屏幕上元素的相对比例，我们将不胜感激！
这并不是说"增加这么多高度"。
CSS中的填充是您设置的元素属性，用于在元素的边界及其包含的所有内容之间添加空间。
所以，如果你想在你的元素和另一个元素之间有空间，你可以使用"margin"，如果你想要在一个元素内部创建空间，你就可以使用padding。(或子元素上的边距(
.section {
/* Making square */
width: 100%;
padding-top: 100%;
box-sizing: border-box;
}
框大小边框框
默认情况下，在CSS框模型中，分配给元素的宽度和高度仅应用于元素的内容框。如果元素有任何边框或填充，则会将其添加到宽度和高度中，以获得在屏幕上呈现的框的大小。
该形状包含一些文本标签，因此在所述标签的高度上添加了填充。