how to delete extra space between buttons?

Answer 1

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 2

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

button{ margin: 0px; }

Answer 3

Try this(JSFiddle)

CSS

#main {
    
    height: 25em;
}

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

.buttons {
    text-decoration: none;
    color: #ffffff;
    line-height: 3em;
    display: inline-block;
    padding-left:5px;
    padding-right:5px;
    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;
}

Answer 4

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 5

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 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/