html - 如何防止 在两个 div 之间创建空间？

Question

好的，下面是代码

.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

如您所见，我试图在两个 div 之间放置一个 hr。这很好，除了我想要的黑线周围的空白。我知道它应该是这样的，但是有没有办法只得到黑线？

Answer 1

简单使用 margin: 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>