为什么保证金顶部以相反的方式移动，而保证金底部根本没有移动？

Question

正如标题所提到的，这个问题非常具体，我似乎在任何地方都找不到答案。我正在尝试将文本"2017 Indie"添加到页面的最底部。当我将边距顶部设置为某个像素值时，文本将保持不变并且没有任何变化，但是当我执行底部边距时，它会在我所在的分区上方创建额外的空白区域，这与我想要的相反。我不确定问题是什么。

html,
body {
  height: 100%
}
* {
  margin: 0;
}
.sect1 h1 {
  font-size: 100px;
  color: white;
  margin-top: 150px;
  padding: 0;
  display: inline-block;
}
.sect1-1 {
  text-align: center;
}
.sect1-text {
  text-align: center;
}
.sect1 p {
  font-size: 40px;
  color: white;
  margin-top: 250px;
  padding: 0;
  display: inline-block;
}
.text3-1 {
  text-align: center;
  margin-top: 100px;
  display: block;
}
.text3-1 p {
  font-size: 100px;
  color: white;
  background: blue;
  padding: 50px;
  display: inline-block;
}
#p1 {
  top: 540px;
  padding-left: 520px;
  color: white;
  font-size: 42px;
}
#p2 {
  top: 840px;
  padding-left: 220px;
  color: white;
  font-size: 24px;
}
#p3 {
  color: black;
  top: 2935px;
  padding-left: 665px;
}
iframe {
  position: absolute;
}
.sect {
  height: 100%;
  background-size: cover;
  background-attachment: fixed;
}
.subSect {
  height: 51.75%;
  background-color: orange;
  margin: 0;
}
.sect1 {
  background-image: url("images/image4.jpg");
}
.sect2 {
  background-image: url("images/image5.jpg");
}
.sect3 {
  height: 100%;
  background-size: cover;
  background-image: url("images/image2.jpg");
}
script {
  padding-left: 250px;
}

<div class="sect sect1">
  <div class="sect1-1">
    <h1>Indie</h1>
  </div>
  <div class="sect1-text">
    <p>What music</p>
  </div>
</div>
<div class="subSect">
  <div class="text">
    <p>This is about....</p>
  </div>
</div>
<div class="sect sect2">
</div>
<div class="subSect"></div>
<div class="sect3">
  <div class="text3-1">
    <p>2017 Indie</p>
  </div>
</div>

Answer 1

从我的角度来看，margin按预期工作。问题是包含div。将sect3设置为 100% 的height。使用此样式会导致div 与父元素的高度一起显示，父元素的高度是 body 标记。如果我正确理解了问题，删除高度样式将解决问题。

如果需要保持 100% 的高度，则必须添加一些额外的样式以将文本放置在末尾。

将position: relative添加到容器sect3然后将text3-1div 放在底部，例如

.text3-1 {
  position: absolute;
  width: 100%;
  bottom: 0;
  text-align: center;
  margin-top: 100px;
  display: block;
}

html,
body {
  height: 100%
}
* {
  margin: 0;
}
.sect1 h1 {
  font-size: 100px;
  color: white;
  margin-top: 150px;
  padding: 0;
  display: inline-block;
}
.sect1-1 {
  text-align: center;
}
.sect1-text {
  text-align: center;
}
.sect1 p {
  font-size: 40px;
  color: white;
  margin-top: 250px;
  padding: 0;
  display: inline-block;
}
.text3-1 {
  position: absolute;
  width: 100%;
  bottom: 0;
  text-align: center;
  margin-top: 100px;
  display: block;
}
.text3-1 p {
  font-size: 100px;
  color: white;
  background: blue;
  padding: 50px;
  display: inline-block;
}
#p1 {
  top: 540px;
  padding-left: 520px;
  color: white;
  font-size: 42px;
}
#p2 {
  top: 840px;
  padding-left: 220px;
  color: white;
  font-size: 24px;
}
#p3 {
  color: black;
  top: 2935px;
  padding-left: 665px;
}
iframe {
  position: absolute;
}
.sect {
  height: 100%;
  background-size: cover;
  background-attachment: fixed;
}
.subSect {
  height: 51.75%;
  background-color: orange;
  margin: 0;
}
.sect1 {
  background-image: url("images/image4.jpg");
}
.sect2 {
  background-image: url("images/image5.jpg");
}
.sect3 {
  position: relative;
  height: 100%;
  background-size: cover;
  background-image: url("images/image2.jpg");
}
script {
  padding-left: 250px;
}

<div class="sect sect1">
  <div class="sect1-1">
    <h1>Indie</h1>
  </div>
  <div class="sect1-text">
    <p>What music</p>
  </div>
</div>
<div class="subSect">
  <div class="text">
    <p>This is about....</p>
  </div>
</div>
<div class="sect sect2">
</div>
<div class="subSect"></div>
<div class="sect3">
  <div class="text3-1">
    <p>2017 Indie</p>
  </div>
</div>