如何将文本与圆圈分开答案

【问题标题】：How to separate text from a circle如何将文本与圆圈分开
【发布时间】：2020-12-04 10:49:04
【问题描述】：

我有一个计数器可以围绕一个数字做一个白色圆圈。它旁边有文字，问题是它在文字上方的圆圈，所以它之间没有空格。我尝试使用填充或边距，但它不起作用（我正在使用引导程序）

这是我正在使用的 HTML

<div class="info col-sm-12">
    <h2 class="col-sm-12">¿Por qué elegir Egeria?</h2>
    <ol class="row">
        <li class="col-sm-3">
         <!--  <span class="circle">1</span> --> <span class="bold">Lorem ipsum dolor sit amet, <br>consectetur</span> adipiscing elit. Sed luctus.</li>
        <li class="col-sm-3">
           <!-- <span class="circle">2</span> --><span class="bold">Lorem ipsum dolor sit amet, <br> consectetur </span>adipiscing elit. Sed luctus.</li>
        <li class="col-sm-3">
           <!-- <span class="circle">3</span>--> <span class="bold">Lorem ipsum dolor sit amet, <br> consectetur </span>adipiscing elit. Sed luctus.</li>
        <li class="col-sm-3">
          <!--  <span class="circle">4</span>--> <span class="bold">Lorem ipsum dolor sit amet, <br> consectetur </span>adipiscing elit. Sed luctus.</li>
    </ol>
</div>

这是 CSS：

ol {
    margin-left:0; 
    padding-left:0; 
    counter-reset:item;
}

ol>li {
    margin-left:0; 
    padding-left:0; 
    counter-increment:item; 
    list-style:none inside;
    margin-bottom:10px;
    color: white;
    font-family: 'Poppins', sans-serif;
}

ol>li:before {
    content: counter(item);
    padding:8px 15px;
    margin-left: 0.5em;
    margin-right:0.5em;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px; 
    text-align: center;
    background-color: white;
    color: #5960CB;
    font-family: 'Poppins', sans-serif;
}

我只是希望文字不要离白圈太近，谢谢！

【问题讨论】：

查看this answer 中的任何代码 sn-p 是否有帮助。第二个代码 sn -p 使用 CSS 计数器。
@Yousaf 成功了！！非常感谢你:)))

标签： html css layout bootstrap-4 flexbox

【解决方案1】：

你可以玩line-height，如果25px不够用，给它额外的像素。

ol>li>span {
  line-height: 25px;
}

这就是它的工作原理。首先 p 将 line-height 应用于 Special 类。

p.Special {
  line-height: 30px;
}

<html>
  <p class="Special">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</html>

【讨论】：

欢迎您！由于这是此问题的唯一答案，请接受。