how to delete extra space between buttons?
animation, button, css, html, web
Solution
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..
Problem
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