html5 – Spacing between buttons

Question:

I want to decrease the spacing of these buttons but I'm not succeeding. I've already tried putting margin and padding and nothing. I don't want to use a list. How can I do it?

Here's the html code:

<div id="buttonbar">
     <button id="volDn"><img src="images/video/menos.png" id="menos"/></button>
     <button id="volUp"><img src="images/video/mais.png" id="btn-mais"/></button>
     <button id="mute"><img src="images/video/som.png" id="btn-mudo"/></button>
 </div>   

O css:

#buttonbar{
    position: absolute;
    bottom: 0;
    right: 0;
}

Answer:

You cannot remove the space because the browser puts a space character between the buttons (due to a space, line break or indentation in the code itself). Here are two possible and easy-to-implement solutions.

1. Do not leave line breaks between buttons. The code can get polluted, but it's the simplest solution for very specific cases.

<button ...>...</button><button ...>...</button><button ...>...</button>

2. Use float buttons. You can add a float: left to the buttons and use the clearfix technique on the container to clearfix causing problems on the page.

/* Utilize classes no lugar de ids para casos mais genéricos */
.buttonbar:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.buttonbar > button {
    float: left;
}
Scroll to Top