Мне трудно понять это странное поведение.Итак, у меня есть этот div с парой абзацев, и когда я устанавливаю отступ слева в пределах div, чтобы все абзацы были выровнены по левому краю, а не только по абзацам, выровненным по левому краю, они также выдвигаются вверх, как будто яПозиционирую их вертикально вверх.Я попытался протестировать, чтобы увидеть, что происходит. Похоже, чем больше отступов я применяю к родительскому элементу div, тем больше абзацы внутри элемента div выдвигаются вверх.Я попытался взглянуть на стандарты W3C относительно padding-left, чтобы увидеть, есть ли какая-либо связь с полями top и / или bottom или она влияет на верхнюю и нижнюю позиции элементов, и я ничего не нашел.Кроме того, попробовал посмотреть, есть ли здесь что-то на stackoverflow, которое может помочь мне понять, что происходит, и не смог найти это тоже.
Я уверен, что смогу решить проблему, применив больше полей top к абзацам внутри div, чтобы получить абзацы там, где я хочу, но это не то решение, которое я ищу.Я хочу знать, почему применение padding-left к родительскому div не только толкает дочерние абзацы вправо, но и помещает их вверх, тем больше отступа слева я применяю к div?Кто-нибудь даже сталкивался с чем-то подобным?
ОБНОВЛЕНИЕ: Вот код для лучшего объяснения проблемы:
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: div ввопрос в "вступительной странице".Комментарий есть в его правиле css padding-left.Измените это, чтобы увидеть, что я имею в виду
* {
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%;
}