元素与其吞噬我的大脑之间存在间隙

Question

以下是两个HTML元素之间的空白-section和页脚

/* contact form */

#contact {
  min-height: 500px;
  height: auto;
}

#contact .contact-form {
  background: #93cb52;
  width: 50%;
  height: 100%;
}

#contact .contact-form p {
  text-align: center;
  font-size: 16px;
  padding-bottom: 1.3rem;
}

#contact .contact-form h1 {
  text-align: center;
  padding-top: 1.3rem;
}

#contact .contact-form .input {
  display: flex;
  flex-direction: column;
  padding: 0px;
}

#contact .contact-form label {
  color: white;
  padding: 10px;
}

.i20 {
  padding: 10px;
  margin: 10px 20px;
}

.submit-btn {
  color: white;
  text-align: center;
  background: #333;
  margin: auto;
  padding: 1rem 2rem;
  border-radius: 40px;
  margin-bottom: 20px;
  margin-top: 20px;
}


/* footer */

#footer {
  height: 200px;
  background: #333;
  color: white;
  text-align: center;
}

#footer p {
  position: relative;
  top: 50%;
}

<!-- Contact and Map -->
<section id="contact">
  <div class="contact-form">
    <h1>Contact Us</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, perspiciatis?</p>
    <div class="input">
      <label for="name"> Name</label>
      <input type="text" class="i20" placeholder="Enter Name">

      <label for="email"> Email</label>
      <input type="email" class="i20" placeholder="Enter Name">

      <label for="phone-number"> Phone number</label>
      <input type="text" class="i20" placeholder="Enter Name">

      <label for="Message"> Message</label>
      <input type="text" class="i20" placeholder="Enter Name">

      <a href="#" class="submit-btn">Submit</a>
    </div>
  </div>

  <div class="map"></div>

</section>


<!-- footer -->
<section id="footer">
  <p>Copyright &copy; Sahara Equity, All Rights Reserved</p>
</section>

我正在使用HTML5和CSS3。还要感谢任何建议，以使此代码少一点冗余和紧凑。这里是新学习者。

这是当前页面的外观。需要有0个空格。

Answer 1

尝试在css文件顶部添加重置css。您也可以使用以下代码，但是添加重置CSS代码是更好的方法

*{
   padding:0;
   margin:0;
}

Answer 2

您应该使用CSS重置https://meyerweb.com/eric/tools/css/reset/

或只是

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

Answer 3

问题来自段落元素的默认边距。只需将其margin-top设置为0，差距就会消失。

/* contact form */

#contact {
  min-height: 500px;
  height: auto;
}

#contact .contact-form {
  background: #93cb52;
  width: 50%;
  height: 100%;
}

#contact .contact-form p {
  text-align: center;
  font-size: 16px;
  padding-bottom: 1.3rem;
}

#contact .contact-form h1 {
  text-align: center;
  padding-top: 1.3rem;
}

#contact .contact-form .input {
  display: flex;
  flex-direction: column;
  padding: 0px;
}

#contact .contact-form label {
  color: white;
  padding: 10px;
}

.i20 {
  padding: 10px;
  margin: 10px 20px;
}

.submit-btn {
  color: white;
  text-align: center;
  background: #333;
  margin: auto;
  padding: 1rem 2rem;
  border-radius: 40px;
  margin-bottom: 20px;
  margin-top: 20px;
}


/* footer */

#footer {
  height: 200px;
  background: #333;
  color: white;
  text-align: center;
}

#footer p {
  position: relative;
  top: 50%;
  margin-top: 0;
}

<!-- Contact and Map -->
<section id="contact">
  <div class="contact-form">
    <h1>Contact Us</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, perspiciatis?</p>
    <div class="input">
      <label for="name"> Name</label>
      <input type="text" class="i20" placeholder="Enter Name">

      <label for="email"> Email</label>
      <input type="email" class="i20" placeholder="Enter Name">

      <label for="phone-number"> Phone number</label>
      <input type="text" class="i20" placeholder="Enter Name">

      <label for="Message"> Message</label>
      <input type="text" class="i20" placeholder="Enter Name">

      <a href="#" class="submit-btn">Submit</a>
    </div>
  </div>

  <div class="map"></div>

</section>


<!-- footer -->
<section id="footer">
  <p>Copyright &copy; Sahara Equity, All Rights Reserved</p>
</section>