Span tag inside anchor tag styling issue

I am having an issue with a particular aspect of a web dev that I am doing at the moment with regards the css styling.

What I have is the following HTML:

<div id = "spaninsidea">
 <ul id="spantest">
    <li><a id="nav-button-one"  href="javascript:return false;"><span>Link 1</span></a></li>
    <li><a id="nav-button-two"  href="javascript:return false;"><span>Link 2</span></a><开发者_开发技巧;/li>
</div>

Styled with the following CSS:

#spaninsidea { background: #494949; padding: 5px 5px 5px 37px; overflow: hidden; margin: 0 0 10px 0; }
#spaninsidea li { display: inline;}
#spaninsidea li a { text-transform:uppercase; text-align:center; border-radius:5px; 
display: block; margin-right:50px; width: 100px; height: 100px; background-color: green;
float: left; }
#spaninsidea li a span {background-color:orange; margin-top:50px}

What I am trying to get is the spaned text inside the link to sit in the middle of the a tag. When I try to apply the margin setting on the span it simply sits still, however if I change the font color etc it plays cricket. I cant figure why it styles but wont budge.

I will confess the front end stuff is new to me so if there are any glaring issues that you can see in general please do point them out.

Cheers

Usually you shouldn't have a span within an a. That would be the first part... I would suggest try to apply a text-align:center; to the span as well.

Update: See a working version here: http://jsfiddle.net/2eLer/ You just have to set the line-height of the span equal to or greater than the height of the a.

It's important to remember that spans are inline elements not block elements and as such, do not respond to margin and padding like you would think they do.

There is a css display property called "inline-block" that allows elements to float like spans and other inline elements do, but also makes them behave like divs with regards to margin and padding.

You shouldn't use <span> at all, but change the padding property of the link itself.