如何防止在两个div之间创建空间?

Okay, so here's 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>

jsfiddle

jsfiddle

As you can see, I tried to put a hr between the two divs. This is good, except for the white space around the black line that I want. I know it's supposed to be like this, but is there a way to get just the black line?

正如你所看到的，我试图在两位女主角之间安排一个hr。这很好，除了我想要的黑线周围的空白。我知道它应该是这样的，但是有办法只得到黑线吗?

1 个解决方案

#1

Simple use margin: 0 to hr element:

简单使用范围:0到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>