How can I make a space between li inside of ul in CSS?-CodePudding

I wanna build a connected li elements with a Vertical Line(Y-axis), straight line which goes from top to bottom connected,The design I made works well, However, I want to to add some space vertical between lis I used margin but it separates the Vertical line. How can I do space but keep the vertical line connected.

ul{
  list-style:none;
}
li{
  border-left: .4rem solid #BBB;
  padding-left: 1.5rem;
  font-size: 1.2rem;
  margin: 1.5rem 0;/*Here does space but they're not connected*/
  position:relative;
}
li::before{
  content:"";
  display:block;
  width:1.3rem; height:.4rem;
  background-color: #BBB;
  position:absolute;
  top:1rem;
  left:0;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Linked Unordered List</title>
</head>
<body>
  
    <h1>Lorem ipsum dolor sit amet</h1>
  <ul>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
  </ul>
</body>
</html>

CodePudding user response：

Margin is not part of the element so the line won't show in it.

You can use padding instead, but instead of a top and bottom space you want to make it just at the bottom (otherwise you get a spurious line at the top of the first element).

But this means you want to get rid of what would be a spurious line at the bottom which you can do using last-child.

ul {
  list-style: none;
}

li {
  border-left: .4rem solid #BBB;
  padding-left: 1.5rem;
  padding-bottom: 3rem;
  font-size: 1.2rem;
  /* margin: 1.5rem 0;/*Here does space but they're not connected*/
  position: relative;
}

li::before {
  content: "";
  display: block;
  width: 1.3rem;
  height: .4rem;
  background-color: #BBB;
  position: absolute;
  top: 1rem;
  left: 0;
}

li:last-child {
  padding-bottom: 0;
}


}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Linked Unordered List</title>
</head>

<body>

  <h1>Lorem ipsum dolor sit amet</h1>
  <ul>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
  </ul>
</body>

</html>

CodePudding user response：

Remove your margin and use padding: 1.5rem 0 1.5rem 1.5rem; for your space.