Button spacing

Navigation
3

I want to decrease the spacing of these buttons but I can not. Already tried to put margin and padding and nothing. I do not want to use a list. How can I do it?

The following is 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;
}
    
asked by anonymous 27.04.2015 / 20:25

2 answers

3

Do the following, add this code in CSS 

#buttonbar button{

  margin:-2px;

}

The smaller the number the closer they will be to each other

    
27.04.2015 / 20:33
4

You can not 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 breaks between buttons. The code can be polluted, but it is the simplest solution for very specific cases. 

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

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

/* 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;
}
    
27.04.2015 / 20:50
Difference between the contents () and html () methods New row in the table every 3 columns