How to create small SPACES in HTML?

Question

There is em dash and en dash. Is there an \"en\" equivalent to   ? Is there an en equivalent to pure Ascii 32?

I want a better way to

Answer 1

 

... and various other non-standard space characters are not properly implemented in some fixed fonts.

This will will foul up your rendering on the web browser end in an uncontrollable manner, and you can't fix it by being specific about the font, because you can't control what actual font is being used by the web browser — even if you specify the font-name or font-family, that doesn't mean the font they have is the same as the font you have.

But you can build a 100%-compatible space of any size you want, though, and it's very easy. The em value is the current font-size. It's the height, but whatever the width of the font is, it's always a constant relative to the height in a fixed-width font. So you can take advantage of that.

Here's how to make a 1/2 width, non-breaking space within the context of a fixed-width font that works with everything. I show it implemented in a span's style="" option, but of course you can make a CSS class instead to make its use less clumsy:

<span style="font-size: .5em;">&nbsp;</span>

Here's how to make a 1/4 width, non-breaking space:

<span style="font-size: .25em;">&nbsp;</span>

...and so on.

This always works with space sizes smaller than the current full-width space because the character is shorter than the other characters on the line, so they control the line spacing, not the shorter character.

If you want a space that is wider than one space, use a combination of full spaces and shorter spaces. While you will get a wider space if you use something like 1.5em, you will also get a taller space, and so that will affect the line spacing.

While this solution is annoyingly cumbersome, it has the desirable attribute of always working — which none of the others do.

Answer 2

You could alter your CSS in such:

.spanen{word-spacing:.6em;}

Answer 3

The Unicode character U+2002 EN SPACE ( ,   or as entity reference  ) is a space with en width.

Answer 4

  (thin space) should do

Note that   has not the same with as an — (—); to separate numbers you should use a narrow no-break space (U+202F).

As others have mentioned, you are better off using the CSS property word-spacing to define the width of your spaces. it's probably a good idea to combine it with white-space:nowrap;

Answer 5

Don't use hacks that make no sense. If you wish to separate some words, I suggest you use the CSS property word-spacing:

.strangeNumbers {
  word-spacing: 0.5em;
}

<span class="strangeNumbers">123 456</span>