While working on a project recently, I was faced with the same issue Chris addressed in his April 21st article, “Fighting the Space Between Inline Block Elements.” I read the article and the comments and finding no suitable solution, posted my own comment and a link to a jsFiddle.
I was looking for a solution with no floats, no pixel resetting of fonts, no negative margin calculations for different fonts and/or browsers and which would apply inline-block but remove white space between them universally, unobtrusively and across browsers and platforms. I coded a solution, tested it in the browsers in my arsenal and posted my solution to the comments on the article.
It hasn’t garnered any attention (supportive or critical) and so I thought I’d ask for feedback here. I’m looking for comments on browser compatibility, brevity, and especially any grave oversights on my part — I’d like to use this solution on a current project and would be dismayed to discover any affliction that might have disastrous consequences.
Thanks for your feedback. Negative letter spacing was not a sufficient workaround for the issue as I encountered it. I appreciate your input and had a look at the overlapping elements issue you mentioned.
I was able to reduce my code (for my purposes) to these lines:
That solved the issue in all my target browsers. Fiddle with it if you like — (Note: the IE-specific code was moved to a separate IE-targeted stylesheet).
I put “font-size: 0rem” in because I only want browsers that recognize rem to apply the size. Since I am restoring it with font-size: 1rem in the next rule, it seemed logical to enforce it in the first rule as well. I am using display: table to target Safari which won’t respect font-size: 0 for inline-block styled elements.