HTML / CSS - Unexplained margins

Question

I have the following page with some HTML / CSS : http://jsfiddle.net/Hf6dB/1/

For some reason the buttons of the toolbar at the top of the screen have a margin right. Margin left, top and bottom is ok because the container has a padding, but where is the margin right from ?

Also in the real version of the page, which you can't see on the fiddle bbecause there are no icons, i have a similar problem in each of the menu entries :

            <li>
                <div class="draggable">
                    <input id="tb-btn-search" title="Search" type="button">
                    <p>Search</p>
                </div>
            </li>

When the mouse is out of the button, the <p> has a width that gets animated from 0 to something like 2 using CSS transitions. For some reason, when the width of the <p> is zero, the icon is not centered anymore because, here too, there is an extra margin that comes from nowhere.

Would this be related to the usage of inline block display property ?

Thanks for yor help !

Answer 1

display: inline-block creates a gap between elements. Further reading here.

Edit:

bjb568 mentioned in the comments re 4px gap:

NO! 4px gap depends on the font and size. You cannot use negative margins to solve this, since you don't know how big the gap is. -4px is a magic number, and thus should be avoided. Use font-size: 0, instead

Answer 2

You can delete inline-block in the <ul> and add float: left; to the li

#toolbar ul,
#toolbar li
{
    display: inline-block;         /* delete this
}

#toolbar ul,
#toolbar .tb-separator,
#toolbar li
{
     float:left;
}

Updated JsFiddle

Answer 3

The line breaks between the elements are treated as whitespace, because the elements are inline-block, so they are part of a line of text. You can solve this by removing spaces and line breaks between the elements. If you want to keep the indenting in your document, you can choose to add a line break inside the element itself:

<outer
  ><inner
></outer>