Get rid of whitespace between divs

Question

HTML:

<div id="alt-color">
    <p> First</p>
</div>

<div id="main-color">
    <h2>Second</h2>
</div>

CSS:

#alt-color {
  background-color: rgba(0, 0, 255, 1);
}
#main-color {
  background-color: rgba(255, 0, 0, 1);
}

How can I remove the whitespace between the divs (first and Second) in the example? Basically I want something like this:

score 1 · Accepted Answer · answered Jun 24 '21 at 19:26

h2 and p and other tags like h1 have , by default, margins ( top and/or bottom ) . Just remove the margins using css.

As an advice, always use the dev tools provided by every browser ( right click -> inspect element ) and check the styles applied to your elements. Will save you a lot of time in the future.

#alt-color{
  background-color: rgba(0, 0, 255, 1);

}
#main-color{
  background-color: rgba(255, 0, 0, 1);
}

p, h2 {
 margin:0
}

  <div id="alt-color">
    <p> First</p>
  </div>

  <div id="main-color">
    <h2>Second</h2>
  </div>

score 0 · Answer 2 · answered Jun 24 '21 at 19:26

h2 and p tags have margins. Remove them with margin: 0:

#alt-color {
  background-color: rgba(0, 0, 255, 1);
}
#main-color {
  background-color: rgba(255, 0, 0, 1);
}
p, h2{
  margin:0;
}

<div id="alt-color">
    <p> First</p>
</div>

<div id="main-color">
    <h2>Second</h2>
</div>

Alternatively:

#alt-color {
  background-color: rgba(0, 0, 255, 1);
}
#main-color {
  background-color: rgba(255, 0, 0, 1);
}
div{
  overflow:auto;
}

<div id="alt-color">
    <p> First</p>
</div>

<div id="main-color">
    <h2>Second</h2>
</div>

Get rid of whitespace between divs

2 Answers2