Space Between 2 Words CSS

space between 2 words CSS

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>ADMIN@SUPERBTC.BIZ<div>
    </div>
</div>

How to put spaces between text in html?

Try using white-space with value pre.

pre Sequences of whitespace are preserved. Lines are only broken at newline characters in the source and at <br> elements.

p {  white-space: pre;}

<p>a b       c</p>

Add space between two words in a ::After Pseudo element CSS

You can use \00a0 instead of spaces in the content property. They don't get collapsed into a single space.

.c1::after{
    content: "SUB TITLE\00a0\00a0THE EXAMPLE";
}

Space between 2 words

space-between would only work if you had the 2 text parts as 2 individual elements, for example 2 span-elements. You could use this:

.spaced{
  word-spacing: 50px;
}

<div class="spaced">
first second
<div>

Add spaces between each letter of word HTML & CSS

Use letter-spacing CSS

h1 {
    letter-spacing: 5px;
}

<h1 style="text-align: center">Spaces</h1>

How to remove the space between words CSS

Your problem is because you're adding multiple spaces together, but without   in an inline text element, only one space will render. This is due to white space collapse. This is causing the space to render at the first letter-spacing, which is big at the start, and smaller at the end. Adjust your spacing accordingly and it should work, e.g. start each section with a space, instead of adding one at the start and end.

Depending on the font rendering's actual size, you may still end up with some sub-pixel irregularity, but unless you want to remove all the spacing and add some margin to the <strong> tags, this is probably a decent starting point.

.sub-lead {
    text-align: justify;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}

strong {
    letter-spacing: 3px;
}

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700;800&display=swap" rel="stylesheet">
<div class="sub-lead">
    <strong>THE</strong> 8 5 2<strong> EXPERIENCE</strong> 9 0<strong> YOU</strong> 0 8 5<strong> ARE</strong>
</div>

remove extra space between words in html/css

text-align: justify; spreads out a line to make sure there's no gap at the end of it. To do this, it has to add extra spaces in the middle.

If you don't want this, don't do text-align: justify;, or tell us what you want it to do? Perhaps you want text-align: left?

:)

---

Related Topics