Ayuda con mis botones en css

[acoevil]

mi problema es el sgte estoy haciendo un menu en css lo digo desde ahora soy nuevo en css ..

mi menu tiene un problema o_O cuando quiero colocar varios cuadritos para varios menus quedan pegados uno del otro entren aqui para que vean

http://www.truekesoft.net/mi%20web%20css/FOROS/index.html

y quiero que queden separados como estos.

http://www.desarrolloweb.com/articulos/ejemplos/css/menu.html

COMO PUEDO HACER ESTE CODIGO MAS PEQUEÑO

************************************************** **

#boton
{
font-size:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-align:center;
text-transform:capitalize;
text-decoration:none;
padding:3px;
color:#fff;
background:#638cb5;
width:100px;
height:20px;
float:left;

}

a:link
{
color:#FFFFFF;
}
a:visited
{
font-size:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-align:center;
text-transform:capitalize;
text-decoration:none;
padding:3px;
color:#fff;
background:#638cb5;
width:100px;
height:20px;
float:left;

}
a:hover
{
font-size:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-align:center;
text-transform:capitalize;
text-decoration:none;
padding:3px;
color:#fff;
background:#333333;
width:100px;
height:20px;
float:left;

}

*************************************************

[Raulmmmm]

Pues para tener un margen, pon margin en el botón:

Código:

#boton
{
margin: 3px; 
...

Y para hacer el código más pequeño puedes poner los estilos en una línea:

Código:

#boton { margin: 3px; font-size: 15px; ...}

Y además, te recomiendo que cambies tu actual HTML por este (usando listas):

Código HTML:

<ul id="menu">
<li><a href="#">Inicio</a></li>
<li><a href="#">Software</a></li>
</ul> 

Y entonces cambias el código de #boton por este:

Código:

#menu li { margin: 3px; font: 15px bold Verdana, Arial, Helvetica, sans-serif; text-align:center; text-transform:capitalize; text-decoration:none; padding:3px; color:#fff; background:#638cb5; width:100px; height:20px; float:left; }

[messer]

Para ahorrarte algunas lineas puedes sustituir

Código:

font-size:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;

por

Código:

font: bold 15px Verdana, Arial, Helvetica, sans-serif;

ademas de que no es necesario (en mi opinion) que lo declares en 'a:link', 'a:visited' y 'a:hover'; ya que no varia esa informacion, con que lo declares unicamente en 'a:link' es suficiente.