I don’t know how many of you have experimented with inline-block layouts, but you probably know the huge downfall of having white space awareness between the HTML elements. I want to keep HTML syntax clean so I started to look at possible solutions.
The best way to combat the issue without external resources seems to be word-spacing. It can be used quite well to disable the space between elements, but it has a major downfall of it’s own: whatever value you use, it’ll depend on font in use. For example I found out that the value of -.5625em (or was it -.5265…) to hit the sweet spot with Times New Roman and Arial, but switching font to Verdana broke the layout.
A nice solution to this might be the use of a webfont so you know what will be the exact right value for that particular font, and then just trust that the browser is capable of displaying the font. Which got me thinking a bit further: why not create a font with zero width space?
Test page: http://piittinen.name/html5css3/zerowidth/ (don’t mind the text there)
Unfortunatenaly it seems this **doesn’t work in Chrome**. For whatever reason Chrome doesn’t use the space defined in the ZeroWidth webfont. Firefox and IE seem to work perfectly with this.
Other things that might cross your mind:
1. font-size: 0px; doesn’t work: Chinese Chrome always has a minimum size of 12pt. You don’t want to break your solution only because someone uses a different language.
2. negative margin: harder solution than word-spacing, you don’t want first element of each row to have negative margin for an example. Both use the same value though.
3. Place HTML comments between elements so there can’t be white space: cumbersome.
4. Just write the elements tightly next to each other: visually hard on eyes while writing code, but is the most reliable method.
I’d be interested to see if anyone can get the ZeroWidth font solution to work with Chrome or if any better solution than the #4 on the list above exists.
As far as I can tell, the word-spacing method doesn’t work anymore since WebKit recently changed the way inline-blocks and word-spacing behave (http://trac.webkit.org/changeset/137494).
If no mistake the best way so far are negative margin or HTML comments, depending on what you want to edit.
I wonder if Chrome now works incorrectly when it adds spaces between inline-blocks even when the space in the font is zero width? It seems as if it treats the space between the inline-blocks to be of the same font as in the inline-block. Guess I need to test more when I have the time.
Then I guess you are limited to floats, unless….
Thanks for that. Then I guess to keep things consistent a globally working method for removing the white space would be:
This ought to always work unless there are other browsers that go ahead and force a minimum font-size? Of course adding the zero width font trick would give a double security.
I’m surprised at the comment from @joshuanhibbert …because he turned me on to inline-block in the first place.
I did a test page: http://cdpn.io/wyasd
You can change stuff there by clicking radio and check boxes. These reveal that margin-right: -.25em; is not suitable automatically and you need to vary the value depending on which font you use. It is also potentially risky on bigger projects as simple changes such as changing the font or manipulating HTML code to remove white space (it could happen!) cause margin-right based solution to break. For personal projects it is safe enough, I think.
font-size: 0; is much more reliable. There are still some slight oddities between browsers and this particular example is very hard on Opera. I always succeed in finding the weaknesses of Opera so nothing new here: just don’t make things as complex as I have done on that page and it is probably OK on most sites :)
I think I’d prefer something like this instead of comments:
Good thinking with the zero width space font, too bad it doesn’t work in Chrome. You might wanna try a font with a space width 1em or something width and use `letter-spacing: -1em;` or margin for that matter?
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".