How to prevent <hr> from creating space between two divs?

Question

Ok so here is the code

.div1 {
  background-color:skyblue;
  font-family:Verdana;
  text-align:right;
  height:100px;
  width:200px;
  display:block;
  overflow:hidden;
}
.div2 {
  background-color:lightgreen;
  font-family:Verdana;
  text-align:left;
  height:100px;
  width:200px;
  display:block;
  overflow:hidden;
}

<div class="div1">
  <h1>Hey</h1>
</div>
<hr>
<div class="div2">
  <h1>Hello</h1>
</div>

Run code

jsfiddle

As you can see, I tried to set hr between two divs. This is good, except for the white space around the black line that I want. I know this should be so, but is there a way to get only a black line?

Answer 1

Simple element margin: 0to hr:

hr{
    margin: 0;
}

.div1 {
    background-color:skyblue;
    font-family:Verdana;
    text-align:right;
    height:100px;
    width:200px;
    display:block;
    overflow:hidden;
}
.div2 {
    background-color:lightgreen;
    font-family:Verdana;
    text-align:left;
    height:100px;
    width:200px;
    display:block;
    overflow:hidden;
}
hr {
    margin: 0;
}

<div class="div1">
     <h1>Hey</h1>

</div>
<hr>
<div class="div2">
     <h1>Hello</h1>

</div>

Run code