css两个盒子中间分开

在前端开发中，经常需要实现两个盒子中间的分隔线效果。使用 CSS 可以轻松实现这一效果，下面将介绍两种实现方式。

第一种方式是使用 border 属性。通过为父元素设置 border 样式，然后在子元素中留出与 border 等宽的空隙，就可以实现两个盒子之间的分隔线了。代码如下：

  
  .parent {
    border: 1px solid #000;
    padding: 20px;
  }
  
  .child {
    padding: 20px;
    border: 1px solid #000;
    margin: -1px;
  }
  

第二种方式是使用伪元素。通过为父元素设置 position: relative，然后为伪元素设置 position: absolute，再用 top 或 bottom 属性控制其位置，最后设置 border 样式，就可以实现两个盒子之间的分隔线。代码如下：

  
  .parent {
    position: relative;
    padding: 20px;
  }
  
  .parent::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #000;
  }
  
  .child {
    padding: 20px;
  }
  

以上两种实现方式都可以达到分隔线的效果，具体使用哪种方式取决于实际情况。需要注意的是，如果使用第一种方式，需要为子元素设置 margin: -1px，以抵消 border 的宽度，否则会导致布局错乱。