[分享]css两条线不在一块距离1点点

在CSS中，如果你想要实现两条线不在一块距离仅仅相差1点点的效果，应该怎么做呢？接下来我们来探讨一下。

.line1 {
  position: absolute;
  top: 100px;
  left: 20%;
  width: 60%;
  border-top: 1px solid black;
}
.line2 {
  position: absolute;
  top: 101px;
  left: 20%;
  width: 60%;
  border-top: 1px solid black;
} 

上面是实现效果的CSS代码，我们来逐一分析一下。

首先，我们为两条线设置了不同的类名，即.line1和.line2。

然后，我们使用了绝对定位（position: absolute）来让这两条线不受文档流的影响，可以根据其祖先元素的位置进行自由定位。

接着，我们分别给两条线设置了不同的top值，即上边距，这样就可以让它们分开一点点了。

接下来，我们用了相同的left值，即左边距，这样可以让它们在同一水平线上进行水平布局。

最后，我们设置了相同的宽度，即width:60%，这样两条线的长度相同。

通过这些CSS属性的调整，我们就实现了两条线不在一块距离仅仅相差1点点的效果。