Strange gap between two buttons [duplicate] - html

Question

This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 8 years ago.
I'm experiencing a strange behaviour with the HTML button tag. It seems that when I place two buttons side by side, they have a 4px gap between them appearing out of nowhere.
Here is a fiddle which shows the issue.
As you can see from the image below, FireBug shows that the gap is neither a margin or a padding (since a padding would be shown in purple).
As a note: I'm using the latest version of Firefox on Windows 8.1 and I tried also with the CSS Reset from Eric Mayer, but the gap is still there.
It's not a really important problem, but it would be nice to know if it's normal or not and what causes it.

Answer 1

The problem is that in inline-block elements the whitespace in HTML becomes visual space on screen. Some solutions to fix it:
Use font-size: 0 to parent container(you have to define font-size to child elements):
.buttons {
width: 304px;
margin: 0 auto;
z-index: 9999;
margin-top: 40px;
font-size: 0;
}
button {
background-color: transparent;
border: 1px solid dimgray;
width: 150px;
height: 40px;
cursor: pointer;
}
<div class="buttons">
<button>Button1</button>
<button>Button2</button>
</div>
Another one is to use negative margin-left: -4px
.buttons {
width: 304px;
margin: 0 auto;
z-index: 9999;
margin-top: 40px;
}
button {
background-color: transparent;
border: 1px solid dimgray;
width: 150px;
height: 40px;
cursor: pointer;
margin-left: -4px;
}
<div class="buttons">
<button>Button1</button>
<button>Button2</button>
</div>
Last but i don't like it at all is to use html comments as spacers
between gaps:
.buttons {
width: 304px;
margin: 0 auto;
z-index: 9999;
margin-top: 40px;
}
button {
background-color: transparent;
border: 1px solid dimgray;
width: 150px;
height: 40px;
cursor: pointer;
}
<div class="buttons">
<button>Button1</button><!--
--><button>Button2</button>
</div>
All above will work. Good luck :)

Answer 2

It's because you have whitespace between button elements. Change your HTML to:
Fiddle
<div class="buttons">
<button>Button1</button><button>Button2</button>
</div>
If you just want to display one line between these buttons, add margin: -1px.
Fiddle
button {
background-color: transparent;
border: 1px solid dimgray;
width: 150px;
height: 40px;
margin: -1px;
cursor: pointer;
}
Additional Tweaks:
In Firefox, when you click on a button, it displays a weird dotted border like below:
Fiddle
To get rid of this, add this to your CSS:
button::-moz-focus-inner {
border: 0;
}
One more thing(Firefox): when you click on the button, the text moves. To prevent this add this to your CSS:
Fiddle
button:active {
padding: 0;
}

Answer 3

It can be corrected by
button {
background-color: transparent;
border: 1px solid dimgray;
width: 150px;
height: 40px;
cursor: pointer;
float:left;
}

Answer 4

As others have said, it is the whitespace between your elements. If you're using PHP, you could do something like this:
<div class="buttons">
<button>Button1</button><?php
?><button>Button2</button>
</div>
Otherwise, you could do this:
<div class="buttons">
<button>Button1</button><
button>Button2</button>
</div>
Or this, as suggested from the comments:
<div class="buttons">
<button>Button1</button><!--
--><button>Button2</button>
</div>

Answer 5

if you float: right; or float: left; you will see no space.
jsfiddle