Javascript 在垂直位置填充左侧奇怪的行为

我很难弄明白这是一种奇怪的行为。这个div有两个段落，当我在div中设置左边的填充时，我让所有段落左对齐，而不仅仅是段落左对齐，它们也会被推到顶部，就像我垂直向上放置一样。我试着测试看看发生了什么，似乎我对父div应用的填充越多，该div中的段落就越往上推到顶部。我试着查看W3C关于左边填充的标准，看看是否与边距顶部和/或底部有任何关系，或者它是否影响元素的顶部和底部位置，但我没有发现任何关于左边填充的内容。另外，尝试查看stackoverflow上是否有任何东西可以帮助我了解发生了什么，但也找不到

我相信我可以通过对div中的段落应用更多的页边距顶部来解决这个问题，以获得我想要的段落，但这不是我正在寻找的解决方案。我想知道为什么对父div应用左填充，不仅会将其段落的子项向右推，而且还会将它们向上定位，因为我对div应用的左填充越多？ 有人遇到过这样的事情吗

更新：以下是更好地解释问题的代码：

Html:

关于保证金属性：

该百分比是根据管道的宽度计算的 生成的框的包含块。请注意，这是真实的 “保证金上限”和“保证金下限”也是如此。如果包含块 宽度取决于此元素，则结果布局未定义 在css2.1中

css的这一部分暗示：

#intro-page #p1 {
font-size: 240%;
margin-top: 26%;
line-height: 50px;
}

---

在增加#简介页的填充时，您减少了段落的宽度，从而减少了上边距。

您可以在此处发布问题的演示，这样我们就可以复制它，然后给您一个适合您当前问题的答案吗？就你的问题而言，我看不出左边的填充物和它的孩子们无法解释的顶部对齐之间有任何关联，所以a将是一个救生员。只要用代码更新它，谢谢，你的回答是有意义的。我确实读过关于填充/边距百分比的计算方法。我只是没有充分考虑到，我对div应用的填充越多，段落的宽度就越小。很好的解释。

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}



body {
background-color: #000;
}

#home-page {
height: 100vh;
width: 100%;

}

#intro-page {
width: calc(100% - 120px);
height: 100vh;
background: url(images/light-bulb.jpeg);
background-size: cover;
display: inline-block;
vertical-align: top;
overflow-y: hidden;
padding-left: 5%;  /* Change this padding to 50%   and see what I 
mean*/
}

#intro-page:before {
content: "Hello!";
color: #ffffff;
position: absolute;
left: 6%;
top: 20%;
font-size: 700%;
animation: upAndDown 6s linear infinite;
font-family: 'PT Serif', serif;
}

@keyframes upAndDown {
0% {
    transform: translateY(-20%);
}

50% {
    transform: translateY(0%);
}


100% {
    transform: translateY(-20%);
}
}

#intro-page p {
color: #bababa;
font-family: 'Roboto Condensed', sans-serif;
}

#intro-page #p1 {
font-size: 240%;
margin-top: 26%;
line-height: 50px;
}

#intro-page #quote {
margin-top: 5%;
font-size: 110%;
font-weight: 300;
letter-spacing: 1px;
}

#intro-page hr {
width: 32%;
margin-top: 2%;
}

#intro-page #p1 {
font-size: 240%;
margin-top: 26%;
line-height: 50px;
}