Strange gap between two buttons

Question

I am experiencing strange behavior with an HTML button tag. It seems that when I put the two buttons side by side, they have a 4px gap between them coming out of nowhere.

Here is the fiddle that shows the problem.

As you can see from the image below, FireBug shows that the space is neither margin nor padding (since a padding will be displayed in purple).

As a side note: I'm using the latest version of Firefox on Windows 8.1, and I also tried using CSS Reset by Eric Mayer, but the gap still exists.

This is not a very important issue, but it would be nice to know if it is normal or not, and what causes it.

Answer 1

The problem is that with inline-block elements, spaces in HTML become visual space on the screen. Some solutions to fix it:

• Use font-size: 0 for the parent container (you must determine the font size for the children):

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

2. Another 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> 

3. Last but not at all like using html comments as delimiters between spaces:

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

Everything above will work. Good luck :)

Answer 2

This is because you have spaces between the 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 button s, add margin: -1px .

Fiddle

 button { background-color: transparent; border: 1px solid dimgray; width: 150px; height: 40px; margin: -1px; cursor: pointer; } 

---

Additional settings:

In Firefox, when you click the button, a strange dashed frame is displayed, as shown 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 fixed

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

Answer 4

if you float: right; or float: left; , you will not see a space.

jsfiddle

Answer 5

As others have said, this is a gap between your elements. If you use PHP, you can do something like this:

 <div class="buttons"> <button>Button1</button><?php ?><button>Button2</button> </div> 

Otherwise, you can 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>