Button spacing

Question

I want to reduce the spacing of these buttons but I’m not getting it. I’ve tried to put margin and padding and nothing. I don’t want to use a list. How can I do?

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

The css:

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

Answer 1

You cannot remove the space because the browser places 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 break between buttons. The code may get polluted, but it is the simplest solution for very specific cases.

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

---

2. Utilise float on the buttons. You can add a float: left buttons and use the clearfix in container to not generate problems on 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;
}

Answer 2

Do the following, add this code to the CSS

#buttonbar button{

  margin:-2px;

}

The smaller the number closer to each other