1

Possible Duplicate:
Unwanted margin in inline-block list items
A Space between Inline-Block List Items

To avoid the gap between to li set to display: inline-block, I've set the font size of the ul to 0. Hence the nature of em sizing, 0 is now passed as the base font-size for all li, which practically means that one can't see them.

Is there any way to solve this problem without setting font-size: 14px (for example) to the list items?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Sven
  • 12,997
  • 27
  • 90
  • 148

2 Answers2

2

Just float them instead Maybe they don't need to be inline-block at all, maybe they can just be floated one way or another. That allows you to set their width and height and padding and stuff. You just can't center them like you can by text-align: center; the parent of inline-block elements.

Take a look at this source: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

it list multiple solutions to your problem. Avoid setting the font size to 0;

Eric Goncalves
  • 5,253
  • 4
  • 35
  • 59
  • Wow cool, I haven't found that post. I have just used the method with the comments, also posted by bažmegakapa. Actually I would like to accept both answers... – Sven Jan 28 '13 at 19:12
1

One solution is to put comments into the markup, so list elements will not have white-space between them, so you do not need that hack anymore:

<ul><!--
    --><li>1</li><!--
    --><li>1</li><!--
    --><li>1</li><!--
--></ul>
kapa
  • 77,694
  • 21
  • 158
  • 175