Pfthb

I'm having a hard time figuring it out a weird behavior. So, I have this div with a couple paragraphs, and when I set the padding left within the div so I have all paragraphs left aligned, instead of just the paragraphs being left-aligned, they also get pushed up to the top as if I'm positioning them vertically up as well. I tried testing to see what's going on, it seems like the more padding left I apply to the parent div, the more the paragraphs within the div get pushed up to the top. I tried looking at W3C standards about padding-left to see if there is any relationship with margin top and/or bottom or if it affects the top and bottom position of elements, and I found nothing about. Also, tried see if there is anything here on stackoverflow that can help me figure out what's going on and couldn't find it either.

I'm sure I can fix the problem by applying more margin top to the paragraphs within the div to get the paragraphs where I want, but that's not the solution I'm looking for. I want to know why does applying padding-left to the parent div, not just pushes it's paragraph children to the right, but also position them up to the top the more padding-left I apply to the div?
Has anybody even come across something like that?

UPDATE: Here is the code for better explanation of the problem:

Html:

<div id="home-page">
 <div id="intro-page" class="animated FadeInLeft">
 <canvas class="animated fadeInUp" id="canvas"></canvas>

 <p class="animated fadeInUp" id="p1">Lorem ipsum dolor sit amet, <br> consectetuer adipiscing elit!</p>
 <p class="animated fadeInUp" id="quote">“consectetuer adipiscing elit, <br>no, and WOW! consectetuer adipiscing elit.” <br> consectetuer adipiscing elit</p>
 <hr class="animated fadeInUpBig">
 </div>
</div>

Css: The div in question in "intro-page". There is the comment in its css padding-left rule. Change it to see what I mean

* 
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%;

From W3C Spec about margin properties:

The percentage is calculated with respect to the width of the
generated box's containing block. Note that this is true for
'margin-top' and 'margin-bottom' as well. If the containing block's
width depends on this element, then the resulting layout is undefined
in CSS 2.1.

This part of your css is implied :

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

When augmenting the padding of #intro-page, you are reducing the width of the paragraph, therefore reducing the top margin.