CSS - Spacing Buttons without indenting them to the right

Posted on 2011-04-27
Last Modified: 2012-05-11
Hi All,

I am a beginner with CSS, so this is likely an easy question, but I am having difficulty spacing nav buttons on my play site.

I want them to be spaced apart, but not indented to the right.

I have attached two images and the CSS files:

Version 1) Buttons are not spaced (vertically), but are left-aligned to the page.

Version 2) Buttons now spaced vertically, but the margin applies all the way around, thus shifting the buttons to the right by 10px.

How do I get the vertical separation without the indent (not using margin I guess, but what do I use?)


Alan. Version 1 - Not spaced, but left aligned Version 1 - Not spaced, but left aligned Version-1---navbar.css Version 2 - Spaced, but no longer left aligned to the page Version-2---navbar.css
Question by:Alan3285
    LVL 19

    Expert Comment

    by:Rikin Shah

    Instead of using margin: 10px use this-

    margin-left: 10px ;
    margin-top: 5ps;
    margin-bottom: 5px;
    LVL 19

    Accepted Solution

    Sorry for the Typo:


    Instead of using margin: 10px use this-

    margin-left: 10px ;
    margin-top: 5px;
    margin-bottom: 5px;
    LVL 12

    Author Closing Comment

    Perfect - Thanks!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Maximize Your Threat Intelligence Reporting

    Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    761 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    9 Experts available now in Live!

    Get 1:1 Help Now