I can't seem to figure out a strange issue. I have a div containing multiple paragraphs, but when I adjust the padding left within the div to align all paragraphs to the left, they not only shift to the left but also move up as if I'm positioning them vertically upwards. After some testing, it appears that increasing the left padding on the parent div causes the paragraphs inside to move further up towards the top. I searched W3C standards for information on padding-left and its relationship with margin-top or bottom, but found no relevant details. Similarly, I scoured StackOverflow for help but came up empty-handed.
While adding more margin-top to the paragraphs within the div might solve the problem by placing them where I want, that's not the solution I'm after. I want to understand why applying padding-left to the parent div not only shifts its paragraph children to the right but also moves them upward as I increase the padding-left value?
UPDATE: Here is the code snippet for better clarity:
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 problematic div is "intro-page". Modify the comment in its css padding-left rule to experience the issue
* {
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%;
}