How to add spacing in between

Question

So I have a menu at the top of my page, but I can't figure out how to add spacing in between buttons. I just want a bit of space in between buttons so they don't look so sloppy.

Here's my menu. The code is below it.

HTML:

<div>
  <ul class="topbar">
    <a href="pages/index.html" class="fade">Home Page</a>
    <a href="pages/userprofile.html" class="fade">Profile</a>
    <a href="pages/createacc.html" class="fade">Create an Account</a>
    <a href="pages/settings.html" class="fade">User Settings</a>
    <a href="pages/contact.html" class="fade">Contact Us</a>
  </ul>
</div>

CSS

ul
{
    list-style-type: none;
    padding:0;
    margin:0;
}

/****************************/

.topbar {
    width: 700px ;
    Height:initial;
    background-color: #2b2b2b;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

Answer 1

Your "buttons" should be placed inside list items <li>

<div>
  <ul class="topbar">
    <li><a href="pages/index.html" class="fade">Home Page</a></li>
    <li><a href="pages/userprofile.html" class="fade">Profile</a></li>
    <li><a href="pages/createacc.html" class="fade">Create an Account</a></li>
    <li><a href="pages/settings.html" class="fade">User Settings</a></li>
    <li><a href="pages/contact.html" class="fade">Contact Us</a></li>
  </ul>
</div>

And about styling and spacing...

ul.topbar {
    width: 700px ;
    background-color: #2b2b2b;
    margin:0;
    padding:0;
}

ul.topbar li
{
    list-style-type:none;
    display:inline-block;
    padding:0 10px;
}

ul.topbar a
{
    font-family:Arial;
    color:#950095;
    text-decoration:none;
}

ul.topbar a:hover
{
    color:#FFF;
    text-decoration:underline;
}

And you can check it out here:

If for some sort of weird reason, you do not have access to the code generating the menu, you could use some jQuery to wrap <li> around your <a>:

$( "ul.topbar a" ).wrap( "<li></li>" );

Answer 2

The below should do it

.topbar a:not(:last-child){
  margin-right:10px;
}

Demo Fiddle

This selects all the a items in your menu, representing the menu choices, and adds a right margin to all except the last one.

That said, your HTML is invalid, you need to wrap your a within li elements, or change your HTML to:

<div class="topbar">
    <a href="pages/index.html" class="fade">Home Page</a>
    <a href="pages/userprofile.html" class="fade">Profile</a>
    <a href="pages/createacc.html" class="fade">Create an Account</a>
    <a href="pages/settings.html" class="fade">User Settings</a>
    <a href="pages/contact.html" class="fade">Contact Us</a>
</div>

Answer 3

ad to ur <a> tags display:inline-block and then treat them like divs.. put width height margins and paddings . hope it works ;)

.topbar a{
display:inline-block;
line-height:30px/*its standart but u can change it*/
padding:0 5px; /*this will putt space from left and right u can edit it too*/
/*keep in mid that the elemens with inline-block will fitt in the width of their parent element and make a new line if needed*/
}