Comments on: Word-Spacing and Inline-Block Incompatibility in Webkit Browsers

By: Infernoid

Infernoid — Thu, 06 Jan 2011 18:01:23 +0000

The best solution that i found for this:
Place all your html elements in one line with no enters, line breaks, tabs between them

123

By: supper

supper — Mon, 07 Jun 2010 17:24:35 +0000

The word-spacing property didn’t work at all for me, but the problem certainly was white-space handling. Anyway I managed to make my divs stick neatly into each other with this little trick:

font-size: 0pt;
letter-spacing: -1px;

Works fine in Firefox 3.6.4, Chrome 4.1 and Opera 10.53!

By: biziclop

biziclop — Thu, 18 Feb 2010 21:10:37 +0000

Instead of applying word-spacing on the wrapper element, you can give margin-right:-0.4em to the list items. Unfortunately the size of the space character is very font-dependent … maybe there is some insane :before / :after trickery to solve this :)

By: djsnick

djsnick — Fri, 09 Oct 2009 21:27:33 +0000

django has a kind of solution for this:
template tag ‘spaceless’
http://docs.djangoproject.com/en/dev/ref/templates/builtins/#spaceless

By: djsnick

djsnick — Tue, 08 Sep 2009 15:40:44 +0000

@jay taylor: i like the idea of specific css for this; how about ” white-space: none; ” ?

thanks for this posting. i’ve had the same problem, and haven’t found a nice solution. what i ended up doing is commenting out, in html, the white space between the end of a div and the beginning of the next div.

By: Jay Taylor

Jay Taylor — Fri, 21 Aug 2009 06:40:01 +0000

I agree, it shouldn’t see a space outside of tags. Would be good to have browsers assume there’s no space unless specified in css. Something like, p {display: white-space;}.

Maybe some javascript could move elements next to each other. Or maybe have php includes for certain elements. Just thoughts off the top of my head so there’s probably plenty of issues regarding these methods. It’s like ‘vertical align’, something that sounds so simple can be such a nuisance to implement.

By: Kyle Weems

Kyle Weems — Thu, 20 Aug 2009 22:46:20 +0000

Jay,

That does in fact work. The problem with this technique is attempting to rely upon a CMS/Framework/Client to remove those spaces when you’re not personally able to hand-tool the code on every page.

Also, from a personal standpoint, I shouldn’t have to eliminate white space manually when CSS exists for that purpose.

But thank you for providing this solution!

By: Jay Taylor

Jay Taylor — Thu, 20 Aug 2009 21:53:02 +0000

example should be (replace brackets with html tag arrows)

(li class…)(/li)(li
class…)(/li)(li
etc
etc

By: Jay Taylor

Jay Taylor — Thu, 20 Aug 2009 21:49:53 +0000

hi guys, just come to this page cause I had the same problem. inline-block with gaps blah blah blah.
I was thinking that the gap is like a space (would explain the ‘-word spacing’ thing working in some browsers). What I did was to start the li straight after the previous closing li, essentially eliminating the 1 space you get within HTML when there’s gaps. So far it’s worked in both FF3 and IE8, can someone try it out in others to see what happens. Fingers crossed this works so life can become that little bit easier.

e.g.

class….. class….

By: Kyle Weems

Kyle Weems — Fri, 19 Jun 2009 14:51:46 +0000

@Pavel – I was considering the difficulty of re-inheriting the font-size with the font-size: 0 trick. So you use a letter-spacing/word-spacing hybrid approach? I’ll have to test that one out! (I agree that those style-types are far easier to reset since they’re rarely modified significantly).