Word-Spacing and Inline-Block Incompatibility in Webkit Browsers
Posted by Kyle Weems on April 09, 2009This is a quick sanity check, if nothing else.
A while back, I found a way to make my inline-block spacing issues go away by getting tricky and using word-spacing to remove the gap, as discussed and tested here. I failed to check the results in a webkit browser, though, and recently discovered a slight problem.
Mainly, they don’t support that.
For whatever reason, IE, Firefox and Opera all apply word-spacing styling to inline-blocks, either adding to or removing the whitespace between the elements depending on your style. Safari and Chrome, however, do not. Mind you, they both have whitespace between the elements. They simply don’t allow the use of word-spacing to modify that space.
Here’s an example page showing the use of word-spacing with inline-blocks and normal sentances. Take a look in a webkit and non-webkit browser to notice the difference. (I didn’t bother to do IE 6&7 correction, so those browsers won’t show the lists side-by-side. Upgrade your browser already!)
As you’ll see, the webkit browser isn’t removing the whitespace.
So, the question is this: Does the w3c spec say what behavior is supposed to occur? Is the webkit result a bug/out-of-spec, or are the other browsers providing a result that isn’t required by the spec? It seems to me that the non-webkit result is the proper one. If you’re going to make blocks behave like words with spacing, you should be able to modify them in the same fashion. But then, there’s a lot about CSS that doesn’t always work like you think it should. (point in case: vertical-align. Probably the worst style ever.)
Tags: CSS, inline-block, webkit, word-spacing
I found a link explaining how to work around this. I can’t remember the link but the idea is to set font-size:0; in whatever element contains the ‘inline-block’-ed elements.
So given the following html:
1
2
3
The css would be:
div
{
font-size:0;
}
span
{
display:inline-block;
font-size:1em; /* reset the font size back to whatever you want */
}
Didn’t realize it wouldn’t display the html – sorry. The html should have been:
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
@Jeff Moyes – Thanks for mentioning this trick! I’ve given it a try, and it’s close (but not 100% perfect). It does remove most of the gap. However, it leaves a one pixel gutter in between the elements. However, that’s much easier to deal with in designing a page than an uncertain width based on current font-sizes, etc.
There was a lot of howevers in that last comment. >_>
I had the same problem when using display: block for an unordered list:
Setting letter-spacing to -1000px on the ul worked for IE6/IE7/IE8, FF2/FF3, Chrome, but not Opera 10 beta (possibly too in the stable branch).
Setting word-spacing to -1000px works in Opera, but not webkit, so by combining these two approaches and setting them to “normal” on the li again worked for me for all browsers I tested it on.
While font-size would do the trick as well I think, it’s sometimes a bad thing to do – when you are depending on inheriting the font-size from the parent element(s). The same could be said about letter and word spacing, but how often do we change that?
@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).
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.
<li class….. <li
class…..<li
class….
example should be (replace brackets with html tag arrows)
(li class…)(/li)(li
class…)(/li)(li
etc
etc
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!
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.
@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.
django has a kind of solution for this:
template tag ’spaceless’
http://docs.djangoproject.com/en/dev/ref/templates/builtins/#spaceless
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
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!