为什么保证金顶部以相反的方式发展，而保证金底部根本不会发生变化？

Question

正如标题所提到的，这个问题非常具体，我似乎无法在任何地方找到答案。我试图添加文字＆＃34; 2017 Indie＆＃34;到页面的最底部。当我对某些像素值进行margin-top时，文本将保持不变并且没有任何变化，但是当我执行margin-bottom时，它会在分区上方创建额外的空白区域，而这与我想要的相反。我不确定问题是什么。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

从我的观点来看，margin按预期工作。问题是包含div。 您将sect3设置为height的100％。使用此样式会使div显示为父元素的高度，该元素是body标记。如果我理解问题，删除高度样式将解决问题。

如果需要保持100％的高度，您必须添加一些额外的样式以将文本放在最后。

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

.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>