how to delete extra space between buttons? - html

Question

please check out this code in jsfiddle
HTML:
<div id="main">
<div id="menu">
Home
About Us
Pictures
Contact Us
</div>
</div>
CSS:
#main
{
width: 64em;
height: 25em;
}
#menu
{
background-color: #00b875;
height: 3em;
}
.buttons
{
text-decoration: none;
color: #ffffff;
line-height: 3em;
display: inline-block;
padding-left: 10px;
padding-right: 10px;
font-family: courier new;
-moz-transition: 1s linear;
-ms-transition: 1s linear;
-o-transition: 1s linear;
-webkit-transition: 1s linear;
transition: 1s linear;
}
.buttons:hover
{
background-color: #0d96d6;
}
when switching from one button to another very quickly, you'll notice that there is actually some gap in between two buttons. i want to get rid of this space. any ideas? if you do answer the question, please also explain why a certain property will fix this.
i know that it is tweakable using padding and margin, but the result is likely to get distorted upon zoom. please point out a stable way of solving the problem.
thanks

Answer 1

Look at this jsFiddle
I've updated display:inline-block; to display:block; on the menu links and added float:left to them.
When you use inline-block you will have this ugly inline gap between elements caused by the whitespace between the elements in your HTML markup..

Answer 2

Any whitespace between tags in HTML is collapsed into a single space character, which is why you have that gap.
You could:
Float your elements left,
Put the </a> and <a> next to each other in the source or
Use a font-size: 0 trick
In this case, personally I'd float all my <a>s left although removing whitespace from your source comes with the fewest caveats, the only one being that it's more difficult to read.

Answer 3

Get rid of the spaces themselves: this may look messy but actually it's the cleanest thing you can do. Anything you achieve with CSS tricks is just putting the spaces there and then denying their existence. Instead, you might want to omit them; the only problem to solve is readability.
So let's make it readable:
<div id="main">
<div id="menu">
<!--
-->Home<!--
-->About Us<!--
-->Pictures<!--
-->Contact Us<!--
-->
</div>
</div>
Again, I know it seems weird, yes, but think about it. The real weirdo here is HTML itself, not giving you a clear way to do this. Consider it a special markup! It could as well be part of the HTML standard; technically, btw, it is 100% standard, you are free to use comments...

Answer 4

here is your solution
http://jsfiddle.net/NPqSr/7/
.buttons
{
text-decoration: none;
color: #ffffff;
line-height: 3em;
display: inline-block;
padding-left: 10px;
float:left;
padding-right: 10px;
font-family: courier new;
-moz-transition: 1s linear;
-ms-transition: 1s linear;
-o-transition: 1s linear;
-webkit-transition: 1s linear;
transition: 1s linear;
}

Answer 5

It's 2017: wrap them inside an element with display: inline-flex and flex the inner buttons with something like flex: 0 1 auto:
<div style="display: inline-flex">
<button style="flex: 0 1 auto">...</button>

Answer 6

Try this(JSFiddle)
CSS
#main {
height: 25em;
}
#menu {
background-color: #00b875;
height: 3em;
}
.buttons {
text-decoration: none;
color: #ffffff;
line-height: 3em;
display: inline-block;
padding-left:5px;
padding-right:5px;
font-family: courier new;
-moz-transition: 1s linear;
-ms-transition: 1s linear;
-o-transition: 1s linear;
-webkit-transition: 1s linear;
transition: 1s linear;
}
.buttons:hover {
background-color: #0d96d6;
}

Answer 7

I think with latest CSS possibilities a cleaner solution is to use display:inline-flex on menu and display:flex on buttons, and maybe width:100% on menu:
http://jsfiddle.net/NPqSr/212/

Answer 8

Add the below style to your button. If required, make the margin negative for first of the few buttons.
button{
margin: 0px;
}

Answer 9

If using bootstrap, can group buttons together by wrapping in div with class="btn-group".
Example for v3.3.7: https://getbootstrap.com/docs/3.3/components/#btn-groups-single
Visually might or might not be what you want. Has rounded corners on left and right ends and straight line between buttons.