11

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).

enter image description here

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.

Weafs.py
  • 22,731
  • 9
  • 56
  • 78
Overflowh
  • 1,103
  • 6
  • 18
  • 40

5 Answers5

13

The problem is that in inline-block elements the whitespace in HTML becomes visual space on screen. Some solutions to fix it:

  1. 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>
  1. 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>
  1. 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 :)

Alex Char
  • 32,879
  • 9
  • 49
  • 70
9

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:

enter image description here

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;
}
Weafs.py
  • 22,731
  • 9
  • 56
  • 78
  • Just that simple? But I want to keep them indented. It does not make a lot of sense. But being them `inline` elements maybe it does... – Overflowh Nov 15 '14 at 19:56
2

It can be corrected by

button {
    background-color: transparent;
    border: 1px solid dimgray;
    width: 150px;
    height: 40px;
    cursor: pointer;
    float:left;
}
user7282
  • 5,106
  • 9
  • 41
  • 72
2

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>
Marcus McLean
  • 1,306
  • 2
  • 13
  • 24
1

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

jsfiddle

Mohamad Shiralizadeh
  • 8,329
  • 6
  • 58
  • 93