Why does display: inline-block; in IE have padding and margin that I can't clear?

Question

The display: inline-block; property in IE seems have padding and margin that I can't clear no matter what I try and do. Has anyone else encountered this bug and knows how to fix it?

Answer 1

When using inline-block, be aware that whitespace you have used for formatting your markup will be rendered. This could be misinterpreted as persistent padding or margin.

Answer 2

It's most likely because you have at least one space or linebreak between the inline-block element tags in your markup.

Linebreaks will be converted to a single space between inline-block elements. So the extra space you're seeing is not padding or margin, but an actual space character in the text of the containing element.

There are a few workarounds:

1. Uglify Change your markup to remove or reposition the linebreaks:

   <ul>
       <li>item</li>
       <li>item</li>
   </ul>
   <!-- becomes -->
   <ul>
       <li>item</li><li>item</li>
   </ul>
   <!-- or -->
   <ul>
       <li>item</li><li>
           item</li>
   </ul>
   

2. Use float: left or float: right to display your block elements inline instead of inline-block. Note that this will introduce other issues, like having to ensure that the containing element is clearfixed.

3. Set word-spacing: -1em on the containing element. Note that if your inline-block elements contain any text, and you don't want this text to have wonky word spacing, you'll need to override the inherited rule with word-spacing: normal on the inline elements. Demo: http://jsbin.com/ucivel/1/edit