Another way to kill space between inline-blocks

Inline-block is the bees knees. It really is (for the time being). The one downside is that whitespace surrounding inline-block elements becomes relevant, it behaves just like text. People have declared war on this space and come up with some pretty good solutions, namely:

use a negitive margin
set font-size:0 on parent and font-size: whatever on the elements
comment/remove white space

I came up with something new that might be another good option. I need help testing it to know for sure.

The trick is to use a webfont that sets the space character to an empty character, essentially rendering spaces as nothing. Neato!

Starting code

Here is our starting point, a centered nav that has space between the items

<nav>
  <ul>
    <li>Lorem ipsum dolor.</li>
    <li>Voluptatem, excepturi, unde!</li>
    <li>Vero, error, obcaecati.</li>
  </ul>
</nav>

/* centered nav */
nav ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

nav li {
  display: inline-block;
  background-color: #ccc;
  vertical-align: top;
}

See the Pen ngyEh by Matthew Lein (@matthewlein) on CodePen.

Enter webfont

I made an empty svg, dropped it into icomoon, set it as the space character, and exported webfonts. This is a single character font, so base64 makes the most sense to me, but you can load it externally if you want. It’s pretty critical, so you probably want it to load first in the <head>.

@font-face {
  font-family: empty;
  src: url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAQ0AAoAAAAAA+wAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAJ4AAACeXQ48j09TLzIAAAGUAAAAYAAAAGAIIgbWY21hcAAAAfQAAABEAAAARAAyAGlnYXNwAAACOAAAAAgAAAAIAAAAEGhlYWQAAAJAAAAANgAAADb9mzB5aGhlYQAAAngAAAAkAAAAJAHiAeVobXR4AAACnAAAABAAAAAQAAAAAG1heHAAAAKsAAAABgAAAAYABFAAbmFtZQAAArQAAAFdAAABXVqZXRlwb3N0AAAEFAAAACAAAAAgAAMAAAEABAQAAQEBDHNwYWNlLWVtcHR5AAECAAEAOvgcAvgbA/gYBB4KABlT/4uLHgoAGVP/i4sMB4tr+JT4dAUdAAAAfA8dAAAAgREdAAAACR0AAACVEgAFAQEMFxkbHnNwYWNlLWVtcHR5c3BhY2UtZW1wdHl1MHUxdTIwAAACAYkAAgAEAQEEBwoN/JQO/JQO/JQO/JQO+JQU+JQViwwKAAAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAABAAAAAIAHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADAAAAAIAAgAAgAAAAEAIP/9//8AAAAAACD//f//AAH/4wADAAEAAAAAAAAAAAABAAH//wAPAAEAAAABAAAAeR2GXw889QALAgAAAAAAzz54vgAAAADPPni+AAAAAAAAAAAAAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAABQAAAEAAAAAAAOAK4AAQAAAAAAAQAWAAAAAQAAAAAAAgAOAGMAAQAAAAAAAwAWACwAAQAAAAAABAAWAHEAAQAAAAAABQAWABYAAQAAAAAABgALAEIAAQAAAAAACgAoAIcAAwABBAkAAQAWAAAAAwABBAkAAgAOAGMAAwABBAkAAwAWACwAAwABBAkABAAWAHEAAwABBAkABQAWABYAAwABBAkABgAWAE0AAwABBAkACgAoAIcAcwBwAGEAYwBlAC0AZQBtAHAAdAB5AFYAZQByAHMAaQBvAG4AIAAxAC4AMABzAHAAYQBjAGUALQBlAG0AcAB0AHlzcGFjZS1lbXB0eQBzAHAAYQBjAGUALQBlAG0AcAB0AHkAUgBlAGcAdQBsAGEAcgBzAHAAYQBjAGUALQBlAG0AcAB0AHkARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('woff');
}

I have just included the and .woff for brevity sake, you can include .ttf and .svg as you please. The .eof for IE8 is not working at the moment. Also note that I have named the font-family empty.

Just like the font-size:0 trick, we apply the empty font to the parent, and then change it back to the base font (serif in this case) on the inline-block elements:

/* centered nav */
nav ul {
  font-family: empty; /* <-- set to empty */
  margin: 0;
  padding: 0;
  text-align: center;
}

nav li {
  font-family: serif; /* <-- set back to your font */
  display: inline-block;
  background-color: #ccc;
  vertical-align: top;
  padding: 0 1px; /* Firefox fix */
}

The Results

See the Pen kECDF by Matthew Lein (@matthewlein) on CodePen.

No more whitespace!

The upsides:

No whitespace commenting/managing, which I find completely insane.
Doesn’t rely on size assumptions like the negative margin approach.
Works with any em-based elements, which is the main drawback of the font-size:0 approach.
Possibly a better choice for grid frameworks. It would require a font-base variable but that might be better than a font-base-size variable (like font-size:0) or a size assumption (like negative margin).

The downsides:

A few extra k to download. Each base64 font is ~1.5k uncompressed (less than 1k if served as files). With gzip its probably much less, but I don’t know the specifics. .woff covers almost all browsers at the moment, ttf needed for older android, and svg (maybe?) for several versions old iOS.
Like all webfonts, a tiny flash as it loads (for me most notably in Chrome). It is nearly or completely invisible in the other browsers I tested. It only flashes on first load, maybe due to font (or css?) caching, and is a pretty much a non-issue as a result.
Firefox renders slightly differently, putting the content a bit closer together. 1px padding on both sides make it match webkit, but it wouldn’t hurt to leave that out. In most cases you will have padding on inline-block elements that sit side by side anyway.
IE8 not working, see browser support.

Browser Support

I tested all that one lowly Mac developer can do on their own, I could use some help on this.

Browser support:

IE9+
Chrome
Firefox
iOS 6 Safari

*For IE8, I couldn’t get the .eof to work, using both font-squirrel and icomoon generated fonts. Someone out there might have some insight on that. It should work in my mind, but as we all know—you never know with IE.

You can help!

I’d like to see this working in IE8 and get it tested in the rest of the reasonable browsers. The codepens should be enough to verify it.

Here are all the resources in a github repo. Including:

Demo page
All the webfonts
SVG artwork used
Icomoon selection.json file

Published Mar 07, 2014