The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Inline Block Elements White Space Collapsing

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #38267

    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.


    Simply using letter-spacing: -.25em; on the parent element is sufficient:

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


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


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


    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.


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


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


    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)
  • The forum ‘CSS’ is closed to new topics and replies.