Nrthugu

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.