So here’s where inline-block bothers me. The markup is defining the presentation. Sure, there are tricks with CSS to remove the whitespace, but they are just tricks like the clearfix trick on floats (more about that later).

Thinking about semantic markup, by removing the whitespace next to the inline-block element above, the content is now “I’minline blocktext”. Not exactly semantic.

Let’s review some inline-block fixes

For these examples, I’ll use five divs on a page to achieve an example of layout.

Our basic layout for the next few examples

Fix #1 — Font Size: 0 on the parent.

Since inline-block is whitespace dependent, the line breaks in our code act as whitespace and push our elements apart. One of the fixes is to set a font-size of zero on the parent, and reset the font-size on the element itself. This removes the surrounding whitespace.

The font-size trick

So first things first, this is very destructive as we are not keeping our code DRY, as well, we are accepting that our content has defined our style.

Fix #2 — Remove whitespace from our code.

Another trick is to change our markup. By simply removing the whitespace and linebreaks in our markup, we can remove the spacing between the elements.

Removing whitespace in markup fix

Really though?! You would rather have shitty looking code just to solve an issue that you shouldn’t have in the first place? Also, can you guarantee that the server you render the site on isn’t going to add the line breaks in? What if you like the spacing, and the server minifies it? Not really a viable solution. Our content is defining the presentation.

Fix #3 — Removing the closing element.

Ugh. I can’t believe this is actually a thing. While HTML5 doesn’t care and will do it’s best to close elements for you, PLEASE DON’T DO THIS.

Removing the closing tag because we hate writing nice code.

By removing the closing tag of each element, the whitespace is removed. But holy shit this is bad. We want to write correct markup, not hacky stuff.

I do love inline-block though

This is not me ripping on inline-block in general though. I just don’t believe it’s a ‘better’ way to do layout. In fact, the most promising way to do layout is with flexbox.

Inline-block is useful, but more likely for making an a element look more like a button. I use it often for typographical element styling, as what it’s purpose is.

The computed output of an inline-block element is a block-level element in the end. However, it takes into account the surrounding content.

However for layout, I’m still using floats. Why? Float’s are not affected as content as drastically as inline-block elements are. Sure, they weren’t designed for structural layout, but neither was inline-block. However, the power of floats and their native characteristics far outweigh inline-block.