Using span margins to align text

Question

A little new to html so if further explanation is necessary or this question just doesn't make sense please feel free to say so.

I am using div to layout a webform I am designing and using the &nbsp to move text within a div doesnt always produce the result I want as far as the layout of the page.

I started experimenting and by using:

<span style="margin-left:(variable)px"></span>

i am able to move the text exactly where I want it.

My question is this, is this a bad practice? is there a better way to do what I am trying to do, or a more conventional way? Or even something built into html that I just have not discovered yet.

Thank you

* Added Block of code to show what i am trying to accomplish

   Complainant's Address
   <input type="text" size="50" id="complainantAddress"/> 
   <span style="margin-left:3px"></span>
   City
   <input type="text" name="city" maxlength="15" size="15"/>
   <span style="margin-left:16px"></span>
   State
   </div>

Answer 1

Using non breakable spaces for layout/positioning is bad practice. What you are trying to do with style attributes is better, but inline-style attributes are often considered as bad pratice, too.
Style attributes are hard to maintain and you duplicate lots of information etc. In addition this styling has the highest specificity and cannot be overwritten by other styles (like user CSS files). They should be used with caution.

Use CSS attributes margin, padding and text-align for this.

Sample
http://jsfiddle.net/UYUA7/

HTML

Text<br />

&nbsp;&nbsp;&nbsp;&nbsp;Text <!-- Do NOT use this -->

<div class="center">Center</div>
<div class="right">Right</div>
<div class="indent">Indented</div>

CSS

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.indent {
    margin-left: 20px;
}

Answer 2

What you're doing is actually a better way to do spacing, than relying on &nbsps. This will give you a much greater flexibility in the long-term and allow you to make changes quicker. (Less typing)

The only other thing that I would recommend is to read through this CSS manual:

http://www.w3schools.com/css/css_intro.asp

This will help you continue to learn about position with css.

UPDATE:

This is what your code can look like:

CSS - Use it in the header

<style type="text/css">
#complainantAddress {
    margin-right: 3px;
}

#city {
    margin-right: 16px;
}
</style>

HTML

Complainant's Address: <input type="text" size="50" id="complainantAddress"/> 
City: <input type="text" name="city" maxlength="15" size="15" id="city"/>

Notice that I created two css styles, one for each matching input boxes. Within each style I defined a margin which would add the appropriate spacing to the right of the input box.

So the first input box called "complainantAddress" will have 3px spacing to the right and the second one who's id is "city" will have 16px spacing to the right of it.