html - 元素之间存在差距，它正在吞噬我的大脑

Question

下面是两个 HTML 元素之间的差距 - section 和 footer

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

问题来自段落元素的默认边距。只需将它的 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>

该行为称为 Collapsing margins .