如何在 HTML/CSS 中合并两个部分？

Question

我需要将我网站上的两个部分合并在一起。我用红色框突出显示了它们。 正如你在上面看到的，图像清楚地显示了这些部分被一些空间隔开

#ABC {
  margin-top: 0;
  padding: 0%;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: none;
}

body {
  width: 50%;
  margin: auto;
  padding: zero;
  font-family: Arial;
  background-color: lightblue
}

nav {
  padding: 5px;
  color: mediumpurple;
}

header {
  background-image: linear-gradient(lightgray, wheat);
}

#Introduction {
  background-image: linear-gradient(wheat, white);
  padding: 0%;
}

#Numbers {
  background-image: linear-gradient(white, lime);
  padding: 0%;
}

<header>
  <nav>
    <a target="" href="cats/Menu.html"><i>Visit page 2</i></a>
    <a target="" href="pagina3.html"><i>Visit page 3</i></a>
    <a target="_blank" href="https://www.youtube.com"><i>Youtube's home page</i></a>
  </nav>
  <h1>
    <a target="" href="index.html">
      <img src="plant.png" height="50"></a> Vlad Seboiu</h1>
  <hr/>
</header>
<main>
  <article>
    <section id="Introduction">
      <p>
        <h2 id="ABC"><big>Introduction</big></h2>
      </p>
      <p>hello world</p>
    </section>
    <section id="Numbers">
      <p>10000<sup>2</sup></p>
      <p> H<sub>2</sub>O</p>
      <p>(-20)<sup>52</sup>(-40)<sup>95</sup></p>
    </section>
  </article>
</main>
<footer style="background-color:white">
  <!-- 
               test 
             -->
  <hr/>
  <h2>test</h2>
  <p style="color:green;background-color:chartreuse;">
    <big>
                    123
                </big>
  </p>
</footer>

Answer 1

段落的边距将两个部分分开。您可以通过使用 F12 打开开发工具并检查它们来查看情况。弹出的彩色框显示您的边距。一个快速的解决方法是在相关段落中添加一个类：

.clear-margin {
  margin: 0;
}

#ABC {
  margin-top: 0;
  padding: 0%;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: none;
}

body {
  width: 50%;
  margin: auto;
  padding: zero;
  font-family: Arial;
  background-color: lightblue
}

nav {
  padding: 5px;
  color: mediumpurple;
}

header {
  background-image: linear-gradient(lightgray, wheat);
}

.clear-margin {
  margin: 0;
}

#Introduction {
  background-image: linear-gradient(wheat, white);
  padding: 0%;
}

#Numbers {
  background-image: linear-gradient(white, lime);
  padding: 0%;
}

<header>
  <nav>
    <a target="" href="cats/Menu.html"><i>Visit page 2</i></a>
    <a target="" href="pagina3.html"><i>Visit page 3</i></a>
    <a target="_blank" href="https://www.youtube.com"><i>Youtube's home page</i></a>
  </nav>
  <h1>
    <a target="" href="index.html">
      <img src="plant.png" height="50"></a> Vlad Seboiu</h1>
  <hr/>
</header>
<main>
  <article>
    <section id="Introduction">
      <p>
        <h2 id="ABC"><big>Introduction</big></h2>
      </p>
      <p class="clear-margin">hello world</p>
    </section>
    <section id="Numbers">
      <p class="clear-margin">10000<sup>2</sup></p>
      <p> H<sub>2</sub>O</p>
      <p>(-20)<sup>52</sup>(-40)<sup>95</sup></p>
    </section>
  </article>
</main>
<footer style="background-color:white">
  <!-- 
               test 
             -->
  <hr/>
  <h2>test</h2>
  <p style="color:green;background-color:chartreuse;">
    <big>
                    123
                </big>
  </p>
</footer>

Answer 2

<p>

有默认保证金。 将此添加到您的 css

p{
    margin:0px;
 }