CODEWITHSUNDEEP
css
anais
anais

Reputation: 111

space between 2 words CSS

I would like to do a space between 2 words in css for example: 

 1 RUNNING DAYS    [email protected]

In HTML there is  &nbsp but it's not correct to use &nbsp I think? 

<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>[email protected]</div>
    </div>

How to do that in 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;

}

Thank you

Upvotes: 0

Views: 2247

Answers (3)

Bricky
Bricky

Reputation: 2745

You can wrap your text in a p tag, and you can add a margin to that after making it inline-block.

Alternatively, you can make the container a flexbox, and use justify-content: space-between; but you'll need to group each icon with its respective text inside another div or span.

For example: 

<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>[email protected]</p>
    </span>
  </div>
</div>
<style>
.sous-titre-bandeau-blanc {
  display: flex;
  justify-content: space-between;
  width: 450px;
}
</style>

Upvotes: 3

Joseph Dykstra
Joseph Dykstra

Reputation: 1466

I would do something like this, if I'm understanding you correctly

<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>[email protected]<div>
    </div>
</div>

Upvotes: 2

Seva Kalashnikov
Seva Kalashnikov

Reputation: 4392

Since you already have a .fa icon in the right part of your div just add it some left margin:

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

Also, change your far for fa class to correctly display font-awesome icons

Upvotes: 1

Related Questions