Question

我很难弄清它的怪异行为。因此，我的div包含几个段落，当我在div中将填充设置为左时，使所有段落都左对齐，而不仅仅是段落左对齐，它们也像我一样被推到顶部也将它们垂直放置。我尝试进行测试以查看发生了什么，似乎我对父div应用的填充量越多，则div中的段落被推到顶部的位置就越多。我尝试查看有关左填充的W3C标准，以查看是否与页边距顶部和/或底部有任何关系，或者是否影响元素的顶部和底部位置，但我什么都没发现。另外，尝试查看一下stackoverflow上是否有任何内容可以帮助我弄清正在发生什么，也找不到它。

我敢肯定，可以通过对div内的段落应用更多的页边距以获取所需的段落来解决该问题，但这不是我想要的解决方案。我想知道为什么将padding-left应用于父div，不仅将其段落子元素推至右侧，而且将它们应用于我的div越多padding-left，将它们放置在顶部？有人遇到过类似的东西吗？

更新：以下代码可更好地说明问题：

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

Answer 1

摘自W3C Spec关于边距属性：

相对于宽度计算百分比生成框的包含块。请注意，这对于以及“ margin-top”和“ margin-bottom”。如果包含块宽度取决于此元素，则结果布局不确定在CSS 2.1中。

这部分css是隐含的：

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

扩大＃intro-page的填充时，您正在减小段落的宽度，因此减小了上边距。

在垂直位置上填充左侧怪异行为

1 个答案: