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.
The problem is that in inline-block
elements the whitespace in HTML becomes visual space on screen. Some solutions to fix it:
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>
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>
.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 :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With