Multiple Spaces Between Words in HTML Without &Nbsp;

Multiple Spaces Between Words in HTML without

Look at the white-space css property

Using

.barcode{
    white-space:pre; /* or pre-wrap if you want wrapping to still work. */
}

and

<span class="barcode">*AA-XXXX    *"</span>

will do the trick.

.barcode{    font-family:Courier;    white-space:pre; /* or pre-wrap if you want wrapping to still work.*/}

<span class="barcode">*AA-XXXX    *"</span>

How are multiple spaces showing in HTML, without pre, nbsp or white-space: pre?

I'm guessing that the offending space characters in your source code are not SPACE (U+0020), but are actually NO-BREAK SPACE (U+00A0). Visually, they appear identical, but if you view your source code in a hex editor (which shows you the individual bytes in the file), you'll see a different encoding for these characters.

Edit 1

This PHP code should find and replace the offending characters with regular spaces:

$strNoBreakSpace = mb_convert_encoding(' ', 'UTF-8', 'HTML-ENTITIES');
$strNormalSpace  = mb_convert_encoding(' ', 'UTF-8', 'HTML-ENTITIES');

$strInput = str_replace( $strNoBreakSpace, $strNormalSpace, $strInput );

Edit 2

A simpler way of creating the two space characters:

$strNoBreakSpace = json_decode('"\u00A0"');
$strNormalSpace  = json_decode('"\u0020"');

Tab space instead of multiple non-breaking spaces ( nbsp )?

It's much cleaner to use CSS. Try padding-left:5em or margin-left:5em as appropriate instead.

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>

How to stop Browser from replacing multiple space by single space?

Whitespace is non-significant by default, and is compacted down to a single space when rendered.

CSS can change that: white-space: pre-wrap will provide the default line-wrapping functionality that you would expect, plus the significant-whitespace behaviour of preformatted text. Best of both worlds!

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 unwanted spacing ( ) between 2 table elements

It seems like the issue is the s you intentionally added within the table. HTML has strict rules about what can and can't be a direct child of the various table elements.

A text node can't be the direct child of a tr, which can contain only:

Zero or more td, th, and script-supporting elements.

Therefore, the text nodes get pushed outside the table. Remove those, and the visual layout will be fixed (I'd still recommend fixing the semantics of the markup, though).

Original answer below

Your HTML is malformed in any case. What looks to be a table header row and body row are represented as 2 separate tables. Try something like this:

<table style="border-collapse: collapse;">
  <thead style="/* styles from what's currently your first table */">
    <tr>
      <!-- content from what's currently your first table -->
      <th>...</th>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody style="/* styles from what's currently your second table */">
    <tr>
      <!-- content from what's currently your second table -->
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

Why does HTML require that multiple spaces show up as a single space in the browser?

Spaces are compacted in HTML because there's a distinction between how HTML is formatted and how it should be rendered. Consider a page like this:

<html>
    <body>
        <a href="mylink">A link</a>
    </body>
</html>

If the HTML was indented using spaces for example, the link would be preceded by several spaces.

Text inside div not showing multiple white spaces between words

That is how html works. Whitespace is collapsed. Look at the way your question is displayed to see an example.

To work around this, wrap your text in a <pre> tag, or use instead of space characters

Or add white-space:pre to the CSS for the div.

Multiple Spaces Between Words in HTML Without &Nbsp;