how to delete extra space between buttons?

Question

please check out this code in jsfiddle

HTML:

<div id="main">
    <div id="menu">
        <a href="#" class="buttons">Home</a>
        <a href="#" class="buttons">About Us</a>
        <a href="#" class="buttons">Pictures</a>
        <a href="#" class="buttons">Contact Us</a>
    </div>
</div>

CSS:

#main
{
    width: 64em;
    height: 25em;
}

#menu

    {
        background-color: #00b875;
        height: 3em;
    }

    .buttons
    {
        text-decoration: none;
        color: #ffffff;
        line-height: 3em;
        display: inline-block;
        padding-left: 10px;
        padding-right: 10px;
        font-family: courier new;
        -moz-transition: 1s linear;
        -ms-transition: 1s linear;
        -o-transition: 1s linear;
        -webkit-transition: 1s linear;
        transition: 1s linear;
    }

    .buttons:hover
    {
        background-color: #0d96d6;
    }

when switching from one button to another very quickly, you'll notice that there is actually some gap in between two buttons. i want to get rid of this space. any ideas? if you do answer the question, please also explain why a certain property will fix this.

i know that it is tweakable using padding and margin, but the result is likely to get distorted upon zoom. please point out a stable way of solving the problem.

thanks

Answer 1

Add the below style to your button. If required, make the margin negative for first of the few buttons.

button{ margin: 0px; }

Answer 2

Any whitespace between tags in HTML is collapsed into a single space character, which is why you have that gap.

You could:

• Float your elements left,
• Put the </a> and <a> next to each other in the source or
• Use a font-size: 0 trick

In this case, personally I'd float all my <a>s left although removing whitespace from your source comes with the fewest caveats, the only one being that it's more difficult to read.

Answer 3

If using bootstrap, can group buttons together by wrapping in div with class="btn-group". Example for v3.3.7: https://getbootstrap.com/docs/3.3/components/#btn-groups-single

Visually might or might not be what you want. Has rounded corners on left and right ends and straight line between buttons.

Answer 4

It's 2017: wrap them inside an element with display: inline-flex and flex the inner buttons with something like flex: 0 1 auto:

<div style="display: inline-flex">
    <button style="flex: 0 1 auto">...</button>

Answer 5

Look at this jsFiddle

I've updated display:inline-block; to display:block; on the menu links and added float:left to them.

When you use inline-block you will have this ugly inline gap between elements caused by the whitespace between the elements in your HTML markup..

Answer 6

I think with latest CSS possibilities a cleaner solution is to use display:inline-flex on menu and display:flex on buttons, and maybe width:100% on menu:

http://jsfiddle.net/NPqSr/212/