Question 45023 in Html Question posted in
Some basic documentation can be found here.

How To Merge Two Sections Together In HTML/CSS?

I need to merge two sections together from my website.I highlighted them in a red box.
personal webpage, showing that the sections described are indeed not merged and there's some space separating them
as you can see above, the image shows clearly that the sections are separated by some space

#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>
Tags:

3

Answers


  1. 0

    The margin on your paragraphs is separating the two sections. You can view this is the case by opening dev tools with F12 and inspecting them. The coloured box that pops up shows your margins. A quick fix could be to add a class to the paragraphs in question:

    .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>
    Login or Signup to reply.
  2. 0

    <p> has default margin.
    Add this to your css

    p{
    margin:0px;
 }
    Login or Signup to reply.
  3. 0

    p tag has margin which is not merging two section

    just do this:

     p {margin:0px;}

    https://codepen.io/Aksshit/pen/dyqMWzd
    check this for solution which I tried on codepen.

    Tip: Always use Developer Tools to first know the problem.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search