HTML/CSS: Why do these boxes not touch?

Question

I have the following HTML/CSS code:

<style>
   .container {
    min-height: 100px;
    width: 100%;
    background: Green;

  }

  .timeline-container {
    height: 100px;
    width: 55%;
    background: rgb(0 150 255);

    }
</style>


<div class="container"></div>

<div class="timeline-container">
</div>

...which produces the following image: Image of green box and blue box touching.

As you can see, the boxes are touching, with no vertical space between them.

I want to add some text to the second box, and I do so with an h4element. See code below:

<style>
   .container {
    min-height: 100px;
    width: 100%;
    background: Green;

  }

  .timeline-container {
    height: 100px;
    width: 55%;
    background: rgb(0 150 255);

    }
</style>


<div class="container"></div>

<div class="timeline-container">
  <h4>Test words </h4> 
</div>

Which produces this image: green and blue boxes are no longer touching

Vertical space has appeared between the two boxes, and it seems to occur when I add the h4 element. I do not want this vertical gap between the boxes.

I want to understand:

1. Why this vertical space suddenly appears (I assume I'm lacking a piece of fundamental knowledge).
2. How to create 2 such boxes, with an h4 element in the second, and have no such space.

Thanks in advance for any help folks can provide.

Answer 1

Remove margin for h4 like

.timeline-container h4{
      margin:0;
    }

.container {
    min-height: 100px;
    width: 100%;
    background: Green;

  }

  .timeline-container {
    height: 100px;
    width: 55%;
    background: rgb(0 150 255);

    }
    .timeline-container h4{
      margin:0;
    }

<div class="container"></div>

<div class="timeline-container">
  <h4>Test words </h4> 
</div>