Question

我很难弄清楚这一点。在我正在研究的站点上，在两个部分和页脚之间，似乎有空白显示背景颜色，并且我不知道如何摆脱该空白，因此这些部分和页脚位于顶部彼此之间没有空间。如果有人可以签出代码，将不胜感激。

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  background-color: #5CDB95;
  font-family: 'Gamja Flower', sans-serif;
  line-height: 20px;
}

h1 {
  margin: 10px 0px 24px;
  font-family: 'Petit Formal Script', sans-serif;
  color: #2d3338;
  font-size: 69px;
  line-height: 54px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0px;
  text-shadow: none;
}

h2 {
  margin: 0px 0px 10px;
  font-size: 32px;
  line-height: 36px;
  font-weight: 400;
  text-shadow: none;
}

p {
  color: #05386B;
}

.button {
  width: 35%;
  height: 54px;
  background-color: #1abc9c;
  color: #fff;
  font-size: 16px;
  font-weight: 300;
  margin-top: 10px;
}

.subtitle {
  margin-right: 89px;
  margin-bottom: 63px;
  margin-left: 89px;
  font-family: 'Times New Roman';
  color: black;
  font-size: 25px;
  line-height: 31px;
  font-weight: 400;
}

.field {
  width: 70%;
  height: 54px;
  padding-left: 20px;
  border: 0px solid #000;
  font-size: 16px;
}

.sign-up-form {
  display: inline-block;
  width: 100%;
  font-size: 16px;
  text-align: center;
}

.header-section {
  height: 100%;
  padding-top: 104px;
  background-color: #5CDB95;
  text-align: center;
}

.bars-wrapper {
  background-color: #1abc9c;
}

.bar {
  width: 14.285%;
  height: 7px;
  float: left;
  background-color: #1abc9c;
}

.bar._2 {
  background-color: #f2ca27;
}

.bar._3 {
  background-color: #e67e22;
}

.bar._4 {
  background-color: #16a085;
}

.bar._5 {
  background-color: #2980b9;
}

.bar._6 {
  background-color: #e74c3c;
}


/*will be using this to hide parts of image
    .image-crop {
      overflow: hidden;
      height: 260px;
    }
    */

.about-section {
  padding: 80px 0 80px;
  background-color: white;
  margin: 50px 0px 50px;
  font-size: 20px;
}

.about-section h2 {
  font-size: 40px;
  font-weight: 800;
  color: #033048;
  margin-bottom: 40px;
  text-align: center;
}

.about-book p {
  font-size: 22px;
  font-weight: 600;
}

.aboutus {
  padding: 80px 0 80px;
  background-color: white;
  margin: 50px 0px 50px;
  font-size: 20px;
  text-align: center;
}

footer {
  background-color: black;
  padding: 80px 0 80px;
  margin: 50px 0px 50px;
  text-align: center;
  font-size: 20px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css?family=Gamja+Flower" rel="stylesheet">
  <title>Raijin Studios</title>
</head>
<header>

  <body>
    <div class="bars-wrapper">
      <div class="bar"></div>
      <div class="bar _2"></div>
      <div class="bar _3"></div>
      <div class="bar _4"></div>
      <div class="bar _5"></div>
      <div class="bar _6"></div>
      <div class="bar"></div>
    </div>
    <div class="header-section">
      <h1 class="heading">Raijin Studios</h1>
      <p class="subtitle" onmouseover="changeColor(this)" onmouseout="changeColor(this)">Raijin Studios is excited to announce our new upcoming novella, The Water King.</p>

    </div>
    <div class="sign-up-form">
      <form name="sign-up"><input type="email" name="email" placeholder="Enter Your Email" maxlength="256" required="" class="field"><input class="button" type="submit" value="Get Notified"></form>
    </div>
</header>

<!--This is where an image of the new book will go -->

<section class="about-section">
  <h2>About The Water King!</h2>
  <p class="about-book">Beginning in a fictional realm, one heir to the worlds throne is casted to earth by his best friend - his brother, the one he trusted most. When losing his memory causes the mysterious man to forget who he his and where he came from, he turns to the
    help of a strange girl who finds him and helps him remeber who he was and where he came from.</p>
</section>


<section class="aboutus">
  <p>This section will be about the fictionous company. Similar to the about pages on websites.</p>
</section>

<footer>
  <p>©Raijin Studios 2018.</p>
  <!--i will be added more features and elements to both the footer and the sections of the website. For intereactivity, I am going to try to make the color bar at the top fade in and out as well -->
</footer>
</body>

</html>

Answer 1

1）您可以只为margins删除sections并增加填充；

OR

2）您可以将主体背景设置为白色，然后将背景颜色和padding bottom更改为sign-up-form

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-family: 'Gamja Flower', sans-serif;
  line-height: 20px;
}

h1 {
  margin: 10px 0px 24px;
  font-family: 'Petit Formal Script', sans-serif;
  color: #2d3338;
  font-size: 69px;
  line-height: 54px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0px;
  text-shadow: none;
}

h2 {
  margin: 0px 0px 10px;
  font-size: 32px;
  line-height: 36px;
  font-weight: 400;
  text-shadow: none;
}

p {
  color: #05386B;
}

.button {
  width: 35%;
  height: 54px;
  background-color: #1abc9c;
  color: #fff;
  font-size: 16px;
  font-weight: 300;
  margin-top: 10px;
}

.subtitle {
  margin-right: 89px;
  margin-bottom: 63px;
  margin-left: 89px;
  font-family: 'Times New Roman';
  color: black;
  font-size: 25px;
  line-height: 31px;
  font-weight: 400;
}

.field {
  width: 70%;
  height: 54px;
  padding-left: 20px;
  border: 0px solid #000;
  font-size: 16px;
}

.sign-up-form {
  display: inline-block;
  width: 100%;
  font-size: 16px;
  text-align: center;
  background: #5CDB95;
  padding-bottom: 50px;
}

.header-section {
  height: 100%;
  padding-top: 104px;
  background-color: #5CDB95;
  text-align: center;
}

.bars-wrapper {
  background-color: #1abc9c;
}

.bar {
  width: 14.285%;
  height: 7px;
  float: left;
  background-color: #1abc9c;
}

.bar._2 {
  background-color: #f2ca27;
}

.bar._3 {
  background-color: #e67e22;
}

.bar._4 {
  background-color: #16a085;
}

.bar._5 {
  background-color: #2980b9;
}

.bar._6 {
  background-color: #e74c3c;
}


/*will be using this to hide parts of image
    .image-crop {
      overflow: hidden;
      height: 260px;
    }
    */

.about-section {
  padding: 80px 0 80px;
  background-color: white;
  margin: 50px 0px 50px;
  font-size: 20px;
}

.about-section h2 {
  font-size: 40px;
  font-weight: 800;
  color: #033048;
  margin-bottom: 40px;
  text-align: center;
}

.about-book p {
  font-size: 22px;
  font-weight: 600;
}

.aboutus {
  padding: 80px 0 80px;
  background-color: white;
  margin: 50px 0px 50px;
  font-size: 20px;
  text-align: center;
}

footer {
  background-color: black;
  padding: 80px 0 80px;
  margin: 50px 0px 50px;
  text-align: center;
  font-size: 20px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css?family=Gamja+Flower" rel="stylesheet">
  <title>Raijin Studios</title>
</head>
<header>

  <body>
    <div class="bars-wrapper">
      <div class="bar"></div>
      <div class="bar _2"></div>
      <div class="bar _3"></div>
      <div class="bar _4"></div>
      <div class="bar _5"></div>
      <div class="bar _6"></div>
      <div class="bar"></div>
    </div>
    <div class="header-section">
      <h1 class="heading">Raijin Studios</h1>
      <p class="subtitle">Raijin Studios is excited to announce our new upcoming novella, The Water King.</p>

    </div>
    <div class="sign-up-form">
      <form name="sign-up"><input type="email" name="email" placeholder="Enter Your Email" maxlength="256" required="" class="field"><input class="button" type="submit" value="Get Notified"></form>
    </div>
</header>

<!--This is where an image of the new book will go -->

<section class="about-section">
  <h2>About The Water King!</h2>
  <p class="about-book">Beginning in a fictional realm, one heir to the worlds throne is casted to earth by his best friend - his brother, the one he trusted most. When losing his memory causes the mysterious man to forget who he his and where he came from, he turns to the
    help of a strange girl who finds him and helps him remeber who he was and where he came from.</p>
</section>


<section class="aboutus">
  <p>This section will be about the fictionous company. Similar to the about pages on websites.</p>
</section>

<footer>
  <p>©Raijin Studios 2018.</p>
  <!--i will be added more features and elements to both the footer and the sections of the website. For intereactivity, I am going to try to make the color bar at the top fade in and out as well -->
</footer>
</body>

</html>

Answer 2

为margin: 0px;部分使用边距

Answer 3

你去了。

   * {
        box-sizing: border-box;
        margin: 0;
    }

    body {
        background-color: #5CDB95;
        font-family: 'Gamja Flower', sans-serif;
        line-height: 20px;
    }

    h1 {
        margin: 10px 0px 24px;
        font-family: 'Petit Formal Script', sans-serif;
        color: #2d3338;
        font-size: 69px;
        line-height: 54px;
        font-style: normal;
        font-weight: 400;
        letter-spacing: 0px;
        text-shadow: none;
    }

    h2 {
        margin: 0px 0px 10px;
        font-size: 32px;
        line-height: 36px;
        font-weight: 400;
        text-shadow: none;
    }

    p {
        color: #05386B;
    }

    .button {
        width: 35%;
        height: 54px;
        background-color: #1abc9c;
        color: #fff;
        font-size: 16px;
        font-weight: 300;
        margin-top: 10px;
    }

    .subtitle {
        margin-right: 89px;
        margin-bottom: 63px;
        margin-left: 89px;
        font-family: 'Times New Roman';
        color: black;
        font-size: 25px;
        line-height: 31px;
        font-weight: 400;
    }

    .field {
        width: 70%;
        height: 54px;
        padding-left: 20px;
        border: 0px solid #000;
        font-size: 16px;
    }

    .sign-up-form {
        display: inline-block;
        width: 100%;
        font-size: 16px;
        text-align: center;
    }

    .header-section {
        height: 100%;
        padding-top: 104px;
        background-color: #5CDB95;
        text-align: center;
    }

    .bars-wrapper {
        background-color: #1abc9c;
    }

    .bar {
        width: 14.285%;
        height: 7px;
        float: left;
        background-color: #1abc9c;
    }

    .bar._2 {
        background-color: #f2ca27;
    }

    .bar._3 {
        background-color: #e67e22;
    }

    .bar._4 {
        background-color: #16a085;
    }

    .bar._5 {
        background-color: #2980b9;
    }

    .bar._6 {
        background-color: #e74c3c;
    }


    /*will be using this to hide parts of image
        .image-crop {
            overflow: hidden;
            height: 260px;
        }
        */

    .about-section {
        padding: 80px 0 80px;
        background-color: white;
        font-size: 20px;
    }

    .about-section h2 {
        font-size: 40px;
        font-weight: 800;
        color: #033048;
        text-align: center;
    }

    .about-book p {
        font-size: 22px;
        font-weight: 600;
    }

    .aboutus {
        padding: 80px 0 80px;
        background-color: white;
        font-size: 20px;
        text-align: center;
        margin-top:-50px;
    }

    footer {
        background-color: black;
        padding: 80px 0 80px;
        margin: 50px 0px 50px;
        text-align: center;
        font-size: 20px;
    }

如何摆脱网页各节之间的背景

3 个答案: