Grow your CSS skills. Land your dream job.

Inline Block Elements White Space Collapsing

  • # May 29, 2012 at 3:24 pm

    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.

    # May 29, 2012 at 6:52 pm

    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.

    # May 29, 2012 at 8:40 pm

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

    # May 29, 2012 at 8:51 pm

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

    # May 29, 2012 at 9:00 pm

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

    # May 29, 2012 at 9:03 pm

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

    # May 29, 2012 at 9:08 pm

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

    # May 29, 2012 at 9:16 pm

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

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

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".