how to delete extra space between buttons?

Question

please check out this code in jsfiddle

HTML:

<div id="main">     <div id="menu">         <a href="#" class="buttons">Home</a>         <a href="#" class="buttons">About Us</a>         <a href="#" class="buttons">Pictures</a>         <a href="#" class="buttons">Contact Us</a>     </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.