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:

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;
    margin: 0;
    padding: 0;
    text-align: center;
}

nav li {
    font-family: serif;
    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:

The downsides:

Browser Support

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

Browser support:

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.

Demo page

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