css - 2个单词CSS之间的空间

Question

例如，我想在 css 中的 2 个单词之间留一个空格:

 1 RUNNING DAYS    ADMIN@SUPER.BIZ

在 HTML 中有    但我认为使用   是不正确的？

<div class="bandeau-blanc">
        <div class="sous-titre-bandeau-blanc"><i class="far fa-calendar"></i> 1 RUNNING DAYS &nbsp;&nbsp; <i class="far fa-envelope"></i>ADMIN@SUPERBTC.BIZ</div>
    </div>

如何在 CSS 中做到这一点？

.sous-titre-bandeau-blanc{
    font-family: 'Open Sans', sans-serif;
    font-size: 13.3333px;
    color: #474747; 
    padding-top: 14px;
    padding-left: 28px;
    padding-bottom: 15px;

}

谢谢

Answer 1

您可以将文本包裹在 p 标记中，并且可以在将其设为内联 block 后为其添加边距。

或者，您可以将容器设为 flexbox，并使用 justify-content: space-between; 但您需要将每个图标及其各自的文本分组到另一个 div 或 span 中。

例如:

<div class="bandeau-blanc">
  <div class="sous-titre-bandeau-blanc">
    <span>
      <i class="far fa-calendar" />
      <p>1 RUNNING DAYS</p>
    </span>
    <span>
      <i class="far fa-envelope" />           
      <p>ADMIN@SUPERBTC.BIZ</p>
    </span>
  </div>
</div>
<style>
.sous-titre-bandeau-blanc {
  display: flex;
  justify-content: space-between;
  width: 450px;
}
</style>