0

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 !

Jared Farrish
  • 48,585
  • 17
  • 95
  • 104
Virus721
  • 8,061
  • 12
  • 67
  • 123

3 Answers3

7

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

John
  • 3,357
  • 1
  • 17
  • 15
  • Thanks for the answer, i prefer this float free solution. – Virus721 Mar 22 '14 at 17:58
  • 1
    Read about this too - very annoying - apparently setting the parent div to `font: 0` will eliminate this problem – Alexander Lozada Mar 22 '14 at 18:00
  • Nice suggestions on that page. A couple of them feel icky, like the HTML comments or setting the font size to 0 (because you would have to undo that again on the inner level). Not closing the tags is actually a nice solution and perfectly valid in HTML, of course, so I think that's the best solution in this specific case. You might want to consider adding an excerpt of the solution to you actual answer next time, just in case the link goes dead. – GolezTrol Mar 22 '14 at 18:06
  • The negative margin seems to be the most maintainable so that's what i'm going for. font:0 didn't work for me, or i did it wrong. – Virus721 Mar 22 '14 at 18:07
  • A lot of the solutions aren't pretty, so I usually opt for floats and working around their issues instead. I used the negative margin trick in the past and I remember that causing problems with a certain browser that had no original 4px gap on inline-blocks! – John Mar 22 '14 at 18:09
  • 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. – bjb568 Mar 22 '14 at 18:18
  • @Virus721 , did you make sure that you set `font:0` on the element that parents the `inline-block`? Setting `font:0` on the `inline-block` itself won't work iirc – Alexander Lozada Mar 22 '14 at 21:32
1

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

Carl0s1z
  • 4,683
  • 7
  • 32
  • 47
0

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>
GolezTrol
  • 114,394
  • 18
  • 182
  • 210