How to apply space in span element

Question

I have been trying to apply one white space inside the span element, but couldn't do it.

In my application, I have the following two span elements:

<span style='color:red;margin-right:1.25em'>*</span> 
<span style='color:red;margin-right:1.25em'>&nbsp;</span>

Applied these two spans to different fields to get them into the same alignment level, but I have the following problem:

Is there anything wrong with the above code ?

The first name field should move a bit to the right for proper alignment.

Answer 1

This solution worked for me,

<span>\u00A0</span>

or

<span>&nbsp;</span>

Answer 2

Try add this CSS rule to your span-space element:

white-space: pre;

Answer 3

Since span elements are inline elements by default, horizontal margins are ignored for them by the spec. You can make them inline blocks (supported by most, but not all, browsers), or use padding instead of margin.

This probably won’t solve the ultimate problem, as the characters “*” and the no-break space are not of the same width, except by accident. To set up a table of data consisting of form fields and associated labels and explanations, use an HTML table, and then just add a little styling in CSS.

Answer 4

margin is applied to block or inline-block elements

but not inline element like

span tags

try this

<span style='color:red;margin-right:1.25em; display:inline-block;'>&nbsp;</span>