UL中LI项之间的更改距离：“行高”方法不起作用

Question

here's JSFiddle和我要整理的代码。我需要increase Text_2a和Text_2b之间的距离。我首先修改了[[.li类：line-height：calc（1 em + 1.5vw）;更改为行高：calc（2 em + 1.5vw）;但是，这也增加了Text_2a和Text_1之间的距离，而我希望它保持unchanged。我究竟做错了什么？这是代码：

<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;
}

Answer 1

您可以对ul以下的li元素使用下边距底部。

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