html - 更改 UL : "line-height" approach doesn't work 内 LI 元素之间的距离

Question

here's JSFiddle 和我试图整理的代码。

我需要增加Text_2a 和Text_2b< 之间的距离/强>。我首先修改了.li类:

line-height: calc(1em + 1.5vw);已更改为 line-height: calc(2em + 1.5vw);

但这增加了 Text_2a 和 Text_1 之间的距离 也是，虽然我希望它保持不变。

我做错了什么？

这是代码:

<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 元素使用 margin bottom。

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