Inline Block Elements White Space Collapsing

[MacNimble]

Hello All,

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.

[joshuanhibbert]

Simply using letter-spacing: -.25em; on the parent element is sufficient: http://jsfiddle.net/joshnh/4s7R6/

Also, with your current technique, you are actually causing the elements to overlap slightly.

[MacNimble]

Hello @joshuanhibbert,

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:

ul {

display: table;

font-size: 0rem;

width: 100%;

}

li {

display: inline-block;

font-size: 1rem;

}

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).

[joshuanhibbert]

@MacNimble Any particular reason why are you declaring display: table;? Also, no need to declare a unit alongside a value of 0 (i.e. font-size: 0; is suffiecient).

I almost always use font-size trick myself.

[MacNimble]

@joshuanhibbert:
Sure — see this screenshot. It doesn’t cut it there and forces the final block underneath the others.

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.

[MacNimble]

I should add that while the screenshot shows padding on the lis, it won’t work with the padding removed, either, as is evidenced in this screenshot.

http://jsfiddle.net/4s7R6/3/ and http://jsfiddle.net/4s7R6/4/.

[joshuanhibbert]

@MacNimble What browser? They both look fine for me.

[MacNimble]

@joshuanhibbert:
Firefox 12 (Ubuntu) and Opera 11.64 (Ubuntu)

Additionally, other browsers responded erratically depending on font-family.

[Author]

Posts