пробел между 2 словами CSS

Question

Я хотел бы сделать пробел между 2 словами в css, например:

 1 RUNNING DAYS    ADMIN@SUPER.BIZ

В HTML есть  &nbsp, но не правильно использовать &nbsp Я думаю?

<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

Поскольку у вас уже есть значок .fa в правой части вашего div, просто добавьте немного левого поля:

.sous-titre-bandeau-blanc .fa.fa-envelope { margin-left: 30px; }

Кроме того, измените класс far на fa, чтобы правильно отображать шрифтпотрясающие иконки

Answer 2

Я бы сделал что-то подобное, если я вас правильно понимаю

<style>
    .space-between {
        display: inline-block;
        padding-left: 3em;
    }
    .space-between:first-child {
        padding-left: 0;
    }
</style>

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

Answer 3

Вы можете обернуть свой текст в тег ap и добавить к нему поле после создания встроенного блока.

В качестве альтернативы вы можете сделать контейнер 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>