CSS如何为ul内li添加垂直间距且保持左侧垂直连线连贯

问题根因 #

当前你的垂直连线是li元素的border-left属性，margin属于元素的外部间距，边框不会延伸到margin区域，因此添加间距后对应位置的竖线就会断开。

解决方案1：将竖线挂载到ul元素（推荐，实现最简单） #

直接把整段垂直连线放到父级ul上，不受子元素li的间距影响，直接保留原有间距效果：

ul{
  list-style:none;
  border-left: .4rem solid #BBB; /* 整段竖线放到ul上，天然连通 */
  padding-left: 1.5rem; /* 把原li的左内边距移到ul，保证内容位置不变 */
}
li{
  /* 去掉原li的border-left */
  padding-left: 0;
  font-size: 1.2rem;
  margin: 1.5rem 0; /* 原有间距直接保留，不会导致连线断开 */
  position:relative;
}
li::before{
  content:"";
  display:block;
  width:1.3rem; 
  height:.4rem;
  background-color: #BBB;
  position:absolute;
  top:1rem;
  left: -1.5rem; /* 调整偏移量，让横向短杠和ul的竖线完美对接 */
}

原有HTML代码无需任何修改即可生效。

解决方案2：用伪元素补全间距处的竖线（适合嵌套列表场景） #

如果是多级嵌套列表，不方便给每个ul加边框，可以用::after伪元素补全li之间margin区域的竖线：

ul{
  list-style:none;
  padding-left: 0;
}
li{
  border-left: .4rem solid #BBB;
  padding-left: 1.5rem;
  font-size: 1.2rem;
  margin: 1.5rem 0;
  position:relative;
}
li::before{
  content:"";
  display:block;
  width:1.3rem; 
  height:.4rem;
  background-color: #BBB;
  position:absolute;
  top:1rem;
  left:0;
}
/* 给除了最后一个li之外的元素添加补线的伪元素 */
li:not(:last-child)::after{
  content:"";
  display:block;
  width:.4rem;
  height:1.5rem; /* 高度和li的上下margin值一致 */
  background-color:#BBB;
  position:absolute;
  bottom:-1.5rem; /* 向下偏移一个margin的距离，刚好接上下方li的border */
  left:0;
}

内容的提问来源于stack exchange，提问作者TAHER El Mehdi