html - 如何垂直填充div之间的空间

Question

有四个垂直放置的div，但它们之间有空间。我该如何填充它们之间的空间。我无法找到填补空白的方法。谁能帮忙解决这个问题。

    <div class="pageTwo">
  <h1 class="text-center" style="font-family: 'Julius Sans One', sans-serif;margin-top:100px !important;">Works</h1>
  <div class="block-works">
    <p class="work">We at Good <span class="letter-T">T</span>ree production watch movies at full time. Watching movies at 24 X 7 is our duty and reviewing them is our homework. </p>
  </div>
 </div>
 <div class="pageThree">
 <h1 class="text-center" style="font-family: 'Julius Sans One', sans-serif;margin-top:100px !important;">About Us</h1>
  <div class="block-about-us">
    <p class="work">We at Good <span class="letter-T">T</span>ree production are two bunch of gladiators worshipping movies.</p>
  </div>
 </div>
  <div class="pageFour">
  <h1 class="text-center" style="font-family: 'Julius Sans One', sans-serif;margin-top:50px">Contact Us</h1>
  <div class="block-contact-us text-center"> 
    <p class="work">
      Like us on </br>
      <a>
         <span class="fa fa-facebook-official" style="font-size: 40px;text-align: center;"></span>
      </a>
    </p></br>
    <p class="work" style="">
      Follow us on </br>
      <a>
         <span class="fa fa-twitter" style="font-size: 40px;text-align: center;"></span>
      </a>
    </p>
  </div>
 </div>

CSS:

.pageOne{
      background-size:cover;
    background-color:#DCF5F4;
    height: 60%;
}
.pageTwo{
    background-color: rgb(185, 196, 234);
    background-size:cover;
    height:80%;
    width: 100%;
    margin-top:-3.7%;
}
.pageThree{
    background-color: #F3A0A0;
    background-size:cover;
    height:60%;
}
.pageFour{
  background-color:#B8F2DF;
  background-size:cover;
  height:80%;
}

谁能帮我解决这个问题提前致谢

Answer 1

您可以在父级上使用 flexbox，并在元素上使用 flex-grow: 1 使它们增长以适应父级，如果您希望它们增长以适应窗口的高度。如果您不希望它们那样生长，只需将其删除即可。

* {margin:0;padding:0;}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > div {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.pageOne {
  background-size: cover;
  background-color: #DCF5F4;
}

.pageTwo {
  background-color: rgb(185, 196, 234);
  background-size: cover;
}

.pageThree {
  background-color: #F3A0A0;
  background-size: cover;
}

.pageFour {
  background-color: #B8F2DF;
  background-size: cover;
}

<div class="pageTwo">
  <h1 class="text-center" style="font-family: 'Julius Sans One', sans-serif;">Works</h1>
  <div class="block-works">
    <p class="work">We at Good <span class="letter-T">T</span>ree production watch movies at full time. Watching movies at 24 X 7 is our duty and reviewing them is our homework. </p>
  </div>
</div>
<div class="pageThree">
  <h1 class="text-center" style="font-family: 'Julius Sans One', sans-serif;">About Us</h1>
  <div class="block-about-us">
    <p class="work">We at Good <span class="letter-T">T</span>ree production are two bunch of gladiators worshipping movies.</p>
  </div>
</div>
<div class="pageFour">
  <h1 class="text-center" style="font-family: 'Julius Sans One', sans-serif;">Contact Us</h1>
  <div class="block-contact-us text-center">
    <p class="work">
      Like us on </br>
      <a>
        <span class="fa fa-facebook-official" style="font-size: 40px;text-align: center;"></span>
      </a>
    </p>
    </br>
    <p class="work" style="">
      Follow us on </br>
      <a>
        <span class="fa fa-twitter" style="font-size: 40px;text-align: center;"></span>
      </a>
    </p>
  </div>
</div>

或者，如果您只是希望各部分彼此齐平，请移除 h1 上的内边距(这会折叠，导致各部分之间出现边距)，并在 div 本身上使用填充。然后删除默认边距，这样部分中的 p 元素也不会在父级之外折叠。如果你想在那里填充，你可以在元素的底部应用底部填充。

* {margin:0;}

.pageOne {
  background-size: cover;
  background-color: #DCF5F4;
}

.pageTwo {
  background-color: rgb(185, 196, 234);
  background-size: cover;
  padding-top: 100px;
}

.pageThree {
  background-color: #F3A0A0;
  background-size: cover;
  padding-top: 100px;
}

.pageFour {
  background-color: #B8F2DF;
  background-size: cover;
  padding-top: 50px;
}

<div class="pageTwo">
  <h1 class="text-center" style="font-family: 'Julius Sans One', sans-serif;">Works</h1>
  <div class="block-works">
    <p class="work">We at Good <span class="letter-T">T</span>ree production watch movies at full time. Watching movies at 24 X 7 is our duty and reviewing them is our homework. </p>
  </div>
</div>
<div class="pageThree">
  <h1 class="text-center" style="font-family: 'Julius Sans One', sans-serif;">About Us</h1>
  <div class="block-about-us">
    <p class="work">We at Good <span class="letter-T">T</span>ree production are two bunch of gladiators worshipping movies.</p>
  </div>
</div>
<div class="pageFour">
  <h1 class="text-center" style="font-family: 'Julius Sans One', sans-serif;">Contact Us</h1>
  <div class="block-contact-us text-center">
    <p class="work">
      Like us on </br>
      <a>
        <span class="fa fa-facebook-official" style="font-size: 40px;text-align: center;"></span>
      </a>
    </p>
    </br>
    <p class="work" style="">
      Follow us on </br>
      <a>
        <span class="fa fa-twitter" style="font-size: 40px;text-align: center;"></span>
      </a>
    </p>
  </div>
</div>