CSS: increase the space or width of &nbsp visually?

Question

Can we increase the space or width of   when we see it on a browser?

For instance,

Home   Away

I would like it to have a bigger space between these two words instead of adding too many  

Or maybe there are other solutions rather than using  ?

Answer 1

I would recommed to go for CSS instead

<span>Home</span><span>Away</span>

span
{
padding-left:5em; //use padding or margin according to your need 
margin-left:5em;
}

Otherwise you can go for <pre> tag which parse white spaces in HTML docs

Answer 2

A better solution, without using extra markup, using CSS word-spacing:

<p>Home Away</p>

And the CSS:

p{ 
    word-spacing:30px;
}

jsFiddle Demo

This will allow you to effectively separate design from content in your code.

Answer 3

You can use   instead:

Home   Away

Answer 4

Click here to view Demo

Html

 <div>  Home  <span class="spacing">Away</span>

 <div>

Css

.spacing {
    margin-left:10px; //just set the required spacing
}

Answer 5

You have already plenty of good answers.

Just to make the posibilities list greater, you can set

span {
    white-space: pre;
}

and then just set as many spaces as you want

<span>Home Away</span>
<span>Home   Away</span>
<span>Home    Away</span>

fiddle