How to apply space in span element

Question

I have been trying to apply one white space inside the span element, but couldn't able to 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 in to the same alignment level, but i have the following problem. PFB

is there any thing wrong with the above code

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

Answer 1

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>

Answer 2

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.