CSS:浏览器未正确计算填充百分比

我已经写了一个非常基本的HTML和CSS页面来测试我的响应性网页设计技能，但是填充的计算出了问题，我不知道为什么，任何来自人们的帮助都将不胜感激

下面我添加了我的代码供您查看。我有一个带“部分”和“旁白”的“主要”。两个盒子里都有一个大小不同的盒子。我计算了盒子的大小和边距，但填充物不能正常工作。我通过target/context=result计算了填充，在本例中，第一个框的填充为25px padding/500px=0.05 5%，第二个框的填充为25px/300px=0.08333 8.333%。 然而，这并不会导致25像素的填充，而是创建了一个更大的填充。当我看Google Chrome开发者工具时，它告诉我第一个框的填充现在是56.875px，第二个框是94.797px

一段时间以来，我一直在试图解决这个问题，现在我尝试了不同的方法，但无法解决它

在此方面的任何帮助都将不胜感激。代码如下

正文，章节，旁白，p{ 保证金：0； 填充：0； } 主{ 宽度：90%；/*视口的宽度为1264px，90%的宽度为1137.590px*/ 背景颜色：浅绿色； 最小高度：1000px； 保证金：0自动； } 第{ 高度：500px； 宽度：44.067133%；/*500/1137.590*/ 背景颜色：绿色； 浮动：左； 利润率：04.398736%；/*50.031/1137.590*/ 填充：5%；/25/500*/ } 旁白{ 高度：300px； 宽度：26.434279%；/*300/1137.590*/ 背景颜色：蓝色； 浮动：对； 利润率：04.398736%；/*50.031/1137.590*/ 填充：8.3333333%；/*25/300*/ 颜色：浅蓝色； } 这是一个绿色的盒子

这是一个蓝色的盒子

---

以百分比计算填充时，填充量是由包含块的宽度而不是高度计算的

---

当以百分比表示时，填充是基于包含元素而不是元素本身的高度。

虽然这不是编写响应代码的正确方法，但只是为了让您了解填充百分比不是由div大小决定的，而是由屏幕大小决定的。此外，您使用的4.398736%的保证金在两个div的左侧和右侧都有增加。加上截面两侧5%的填充和侧边两侧8.33333%的填充。其总规模达到115.96555%

如果您想让divs部分和aside并排对齐，请谅解。对这两种样式都使用下面编写的css样式

.section {
height: 500px;
width: 44.067133%;
background-color: green;
float: left;
margin: 02.199736%;
padding: 5%;
display: inline-block;
}

.aside {
height: 300px;
width: 26.434279%;
background-color: blue;
float: right;
margin: 02.199736%;
padding: 5%;
color: lightblue;
display: inline-block;
}

---

希望这对您有所帮助。

请注意，需要在此处发布您的标记，如果您使用github，这将解决此问题。啊，好的，很高兴知道。谢谢，您可能想研究使用SASS或更少，这样您就可以在样式表中使用变量了。哇，真管用。我想这就是计算边距%的方法，但是当涉及到填充时，您使用元素本身的大小。我刚刚参加了一个在线课程，它说明了这一点，这很奇怪。我的理解是，通过我刚刚参加的一个在线课程，你通过元素本身的大小来计算填充百分比，而不是包含元素的大小，我理解的是如何计算边距。课程一定错了，所以…谢谢。似乎填充是根据容器的大小计算的，而不是屏幕或div大小。我参加的一门在线课程明确指出，您通过元素的大小计算填充百分比，这似乎是完全错误的。你添加显示：内联块的理由是什么？是的，我错了。我没想到你也有一个集装箱。我以为你把潜水艇直接放在身体下面。