CODEWITHSUNDEEP
htmlcsshtml-lists
HexenSage
HexenSage

Reputation: 137

Changing distance between LI items within UL: "line-height" approach doesn't work



here's the JSFiddle with the code i'm trying to put in order.

I need to increase the distance between Text_2a and Text_2b. I firstly modified the .li class:

line-height: calc(1em + 1.5vw); was changed to line-height: calc(2em + 1.5vw);

However this increased the distance between Text_2a and Text_1 too, while i wanted it to stay unchanged.

What am i doing wrong?

Here's the code:

<div class="meaning">
 <ol class="circle">
  <li>Text_1</li>
 <ul>
  <li><span class="example">Text_2a</span></li>
  <li><span class="example_translated">Text_2b</span></li>     
 </ul>
 </ol>
 </div>

.meanings_and_examples {
  display: flex;
  flex-direction: column;
}

.meaning {
  width: auto;
  text-align: left;
  color: #1f2c60;
  font-size: calc(0.5em + 2.3vw);
}

ol.circle {
  position: relative;
  list-style-type: none;
  padding-left: 3em;
  margin-left: 1vw;
  border: 2px solid purple;
}

li {
  line-height: calc(1em + 1.5vw);
}

ol.circle > li {
  position: relative;
  counter-increment: item;
  margin-top: 1.5%;
  border: 2px solid orange;
 }

 ol.circle > li::before {
  position: absolute;
  transform: translateX(-150%);
  content: counter(item);
  display: inline-block;
  text-align: center;
  border-radius: 100%;
  width: calc(1.1em + 1.5vw);
  background: #1f2c60;
  color: white;
 }

 ul {
  list-style-type: none;
  padding-left: 0;
  margin-top: 1%;
}

.example {
  width: auto;
  text-align: left;
  border: 2px solid green;
}

.example_translated {
  width: auto;
  text-align: left;
  color: #5d78e5;
  border: 2px solid red;
}

Upvotes: 0

Views: 223

Answers (1)

Cafer Elgin
Cafer Elgin

Reputation: 423

You can use margin bottom for li elements under ul.

ul > li{
    margin-bottom: 10px;
}

Upvotes: 4

Related Questions